callstack__react-native-testing-library/static/js/async/9419.403fcaf7b5.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9419"],{3078(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"screen-object",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#screen-object",children:"#"}),(0,r.jsx)(e.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"queries"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" DebugOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  toJSON"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"screen"})," object provides access to queries and utilities for the currently rendered UI."]}),"\n",(0,r.jsxs)(e.p,{children:["This object is assigned after the ",(0,r.jsx)(e.code,{children:"render"})," call and cleared after each test by calling ",(0,r.jsx)(e.a,{href:"/docs/api/misc/other.html#cleanup",children:(0,r.jsx)(e.code,{children:"cleanup"})}),". If no ",(0,r.jsx)(e.code,{children:"render"})," call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access."]}),"\n",(0,r.jsxs)(e.h3,{id:"queries",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),(0,r.jsx)(e.code,{children:"...queries"})]}),"\n",(0,r.jsxs)(e.p,{children:["The main feature of ",(0,r.jsx)(e.code,{children:"screen"})," is its queries for finding elements in the view hierarchy."]}),"\n",(0,r.jsxs)(e.p,{children:["See ",(0,r.jsx)(e.a,{href:"/docs/api/queries.html",children:"Queries"})," for a complete list."]}),"\n",(0,r.jsxs)(e.h4,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" buttonStart"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and ",(0,r.jsx)(e.code,{children:"key"}),") as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events."]}),"\n",(0,r.jsxs)(e.p,{children:["This method is async and uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during updating. This works with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async rerender test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"first"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"updated"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updated'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"Unmount the in-memory tree, triggering the appropriate lifecycle events."}),"\n",(0,r.jsxs)(e.p,{children:["This method is async and uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during unmounting. This works with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["Usually you should not need to call ",(0,r.jsx)(e.code,{children:"unmount"})," as it is done automatically if your test runner supports ",(0,r.jsx)(e.code,{children:"afterEach"})," hook (like Jest, mocha, Jasmine)."]})}),"\n",(0,r.jsxs)(e.h3,{id:"debug",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug",children:"#"}),(0,r.jsx)(e.code,{children:"debug"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { message"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"; mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" MapPropsFunction"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Pretty prints deeply rendered component passed to ",(0,r.jsx)(e.code,{children:"render"}),"."]}),"\n",(0,r.jsxs)(e.h4,{id:"debug-message-option",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-message-option",children:"#"}),(0,r.jsx)(e.code,{children:"message"})," option"]}),"\n",(0,r.jsx)(e.p,{children:"You can provide a message that will be printed on top."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ message"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'optional message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsx)(e.p,{children:"logs optional message and colored JSX:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"optional message"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{[Function bound fn]}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me</"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"</"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"debug-map-props-option",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-map-props-option",children:"#"}),(0,r.jsx)(e.code,{children:"mapProps"})," option"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ mapProps: (props) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({}) });"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["You can use the ",(0,r.jsx)(e.code,{children:"mapProps"})," option to transform the props that will be printed :"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{{ backgroundColor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'red'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }} />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ props }) });"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This will log the rendered JSX without the ",(0,r.jsx)(e.code,{children:"style"})," props."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"children"})," prop cannot be filtered out so the following will print all rendered components with all props but ",(0,r.jsx)(e.code,{children:"children"})," filtered out."]}),"\n",(0,r.jsxs)(e.p,{children:["This option can be used to target specific props when debugging a query (for instance, keeping only the ",(0,r.jsx)(e.code,{children:"children"})," prop when debugging a ",(0,r.jsx)(e.code,{children:"getByText"})," query)."]}),"\n",(0,r.jsx)(e.p,{children:"You can also transform prop values so that they are more readable (e.g., flatten styles)."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { StyleSheet } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" StyleSheet"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".flatten"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(style)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"    ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  })"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Or remove props that have little value when debugging tests, e.g. path prop for svgs"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) });"})]})})})}),"\n",(0,r.jsxs)(e.h3,{id:"tojson",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tojson",children:"#"}),(0,r.jsx)(e.code,{children:"toJSON"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" toJSON"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"Get the rendered component JSON representation, e.g. for snapshot testing."}),"\n",(0,r.jsxs)(e.h3,{id:"container",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container",children:"#"}),(0,r.jsx)(e.code,{children:"container"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from ",(0,r.jsx)(e.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),"."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"container"})," provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how ",(0,r.jsx)(e.code,{children:"container"})," works in ",(0,r.jsx)(e.a,{href:"https://testing-library.com/docs/react-testing-library/other#container-1",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // container contains the entire rendered tree"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(container)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeTruthy"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"root",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#root",children:"#"}),(0,r.jsx)(e.code,{children:"root"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Returns the rendered root ",(0,r.jsx)(e.a,{href:"/docs/advanced/testing-env.html#host-and-composite-components",children:"host element"}),", or ",(0,r.jsx)(e.code,{children:"null"})," if nothing was rendered. This is the first child of the ",(0,r.jsx)(e.code,{children:"container"}),", which represents the actual root element you rendered."]}),"\n",(0,r.jsxs)(e.p,{children:["This API is useful for component tests where you need to access the root host view without using ",(0,r.jsx)(e.code,{children:"*ByTestId"})," queries or similar methods."]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["In rare cases where your root element is a ",(0,r.jsx)(e.code,{children:"React.Fragment"})," with multiple children, the ",(0,r.jsx)(e.code,{children:"container"})," will have more than one child, and ",(0,r.jsx)(e.code,{children:"root"})," will return only the first one. In such cases, use ",(0,r.jsx)(e.code,{children:"container.children"})," to access all rendered elements."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"root-view"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello</"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // root is the View element you rendered"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'root-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fscreen.mdx"]={toc:[{id:"queries",text:"`...queries`",depth:3},{id:"example",text:"Example",depth:4},{id:"rerender",text:"`rerender`",depth:3},{id:"unmount",text:"`unmount`",depth:3},{id:"debug",text:"`debug`",depth:3},{id:"debug-message-option",text:"`message` option",depth:4},{id:"debug-map-props-option",text:"`mapProps` option",depth:4},{id:"tojson",text:"`toJSON`",depth:3},{id:"container",text:"`container`",depth:3},{id:"root",text:"`root`",depth:3}],title:"`screen` object",headingTitle:"`screen` object",frontmatter:{}}}}]);