callstack__react-native-testing-library/static/js/async/6958.d326b362d4.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6958"],{1389(e,r,n){n.r(r),n.d(r,{default:()=>l});var s=n(4848),o=n(8453),i=n(7425);function t(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(r.h1,{id:"render-api",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-api",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," API"]}),"\n",(0,s.jsxs)(r.h2,{id:"render",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," function"]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderOptions"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderResult"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output components' structure."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'basic test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"  render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.blockquote,{children:["\n",(0,s.jsxs)(r.p,{children:["When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom ",(0,s.jsx)(r.code,{children:"render"})," method. ",(0,s.jsx)(r.a,{href:"https://testing-library.com/docs/react-testing-library/setup#custom-render",rel:"noopener noreferrer",target:"_blank",children:"Follow this great guide on how to set this up"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(r.h3,{id:"options",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:["The behavior of the ",(0,s.jsx)(r.code,{children:"render"})," method can be customized by passing various options as a second argument of the ",(0,s.jsx)(r.code,{children:"RenderOptions"})," type:"]}),"\n",(0,s.jsxs)(r.h4,{id:"wrapper",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,s.jsx)(r.code,{children:"wrapper"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"wrapper"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:".ComponentType"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to wrap the tested component, passed as the first option to the ",(0,s.jsx)(r.code,{children:"render()"})," function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers."]}),"\n",(0,s.jsxs)(r.h4,{id:"concurrent-root",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrent-root",children:"#"}),(0,s.jsx)(r.code,{children:"concurrentRoot"})]}),"\n",(0,s.jsxs)(r.p,{children:["Set to ",(0,s.jsx)(r.code,{children:"false"})," to disable concurrent rendering.\nOtherwise, ",(0,s.jsx)(r.code,{children:"render"})," will default to using concurrent rendering used in the React Native New Architecture."]}),"\n",(0,s.jsxs)(r.h4,{id:"create-node-mock",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#create-node-mock",children:"#"}),(0,s.jsx)(r.code,{children:"createNodeMock"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"createNodeMock"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" (element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to pass ",(0,s.jsx)(r.code,{children:"createNodeMock"})," option to ",(0,s.jsx)(r.code,{children:"ReactTestRenderer.create()"})," method in order to allow for custom mock refs. You can learn more about this option from ",(0,s.jsx)(r.a,{href:"https://reactjs.org/docs/test-renderer.html#ideas",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer documentation"}),"."]}),"\n",(0,s.jsxs)(r.h4,{id:"unstable_validatestringsrenderedwithintext",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unstable_validatestringsrenderedwithintext",children:"#"}),(0,s.jsx)(r.code,{children:"unstable_validateStringsRenderedWithinText"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"unstable_validateStringsRenderedWithinText"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]})})})}),"\n",(0,s.jsx)(i.Pq,{type:"note",title:"Note",children:(0,s.jsxs)(r.p,{children:["\nThis options is experimental, in some cases it might not work as intended, and its behavior might change without observing ",(0,s.jsx)(r.a,{href:"https://semver.org/",rel:"noopener noreferrer",target:"_blank",children:"SemVer"})," requirements for breaking changes."]})}),"\n",(0,s.jsxs)(r.p,{children:["This ",(0,s.jsx)(r.strong,{children:"experimental"})," option allows you to replicate React Native behavior of throwing ",(0,s.jsx)(r.code,{children:"Invariant Violation: Text strings must be rendered within a <Text> component"})," error when you try to render ",(0,s.jsx)(r.code,{children:"string"})," value under components different than ",(0,s.jsx)(r.code,{children:"<Text>"}),", e.g., under ",(0,s.jsx)(r.code,{children:"<View>"}),"."]}),"\n",(0,s.jsx)(r.p,{children:"React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests."}),"\n",(0,s.jsxs)(r.h3,{id:"result",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," function returns the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/13.x/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. We recommend using the ",(0,s.jsx)(r.code,{children:"screen"})," object for a more developer-friendly experience."]}),"\n",(0,s.jsxs)(r.p,{children:["See ",(0,s.jsx)(r.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen",rel:"noopener noreferrer",target:"_blank",children:"this article"})," from Kent C. Dodds for more details."]}),"\n",(0,s.jsxs)(r.h2,{id:"render-async",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async",children:"#"}),(0,s.jsx)(r.code,{children:"renderAsync"})," function"]}),"\n",(0,s.jsx)(i.Pq,{type:"info",title:"RNTL minimal version",children:(0,s.jsx)(r.p,{children:"This API requires RNTL v13.3.0 or later."})}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderAsyncOptions"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"RenderAsyncResult"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function is the async version of ",(0,s.jsx)(r.a,{href:"#render",children:(0,s.jsx)(r.code,{children:"render"})})," designed for working with React 19 and React Suspense. This function uses async ",(0,s.jsx)(r.code,{children:"act"})," function internally to ensure all pending React updates are executed during rendering."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async component test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyAsyncApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.h3,{id:"options-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options-1",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"renderAsync"})," accepts the same options as ",(0,s.jsx)(r.code,{children:"render"}),"."]}),"\n",(0,s.jsxs)(r.h3,{id:"result-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function returns a promise that resolves to the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/13.x/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. Use the ",(0,s.jsx)(r.code,{children:"screen"})," object for queries and the lifecycle methods from the render result when needed."]}),"\n",(0,s.jsx)(i.Pq,{type:"warning",title:"Async lifecycle methods",children:(0,s.jsxs)(r.p,{children:["When using ",(0,s.jsx)(r.code,{children:"renderAsync"}),", you have to use correspodning lifecycle methods: ",(0,s.jsx)(r.code,{children:"rerenderAsync"})," and ",(0,s.jsx)(r.code,{children:"unmountAsync"})," instead of their sync versions."]})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,o.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Frender.mdx"]={toc:[{id:"render",text:"`render` function",depth:2},{id:"options",text:"Options",depth:3},{id:"wrapper",text:"`wrapper`",depth:4},{id:"concurrent-root",text:"`concurrentRoot`",depth:4},{id:"create-node-mock",text:"`createNodeMock`",depth:4},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4},{id:"result",text:"Result",depth:3},{id:"render-async",text:"`renderAsync` function",depth:2},{id:"options-1",text:"Options",depth:3},{id:"result-1",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]);