<p>The <code>render</code> 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. The function is async and uses async <code>act</code> internally, so all pending React updates run before it resolves. This works with async React features like <code>Suspense</code> boundaries and the <code>use()</code> hook.</p>
<p>When using React context providers like Redux Provider, you'll likely want to wrap the rendered component with them. In such cases, create your own custom <code>render</code> method. <ahref="https://testing-library.com/docs/react-testing-library/setup#custom-render"target="_blank"rel="noopener noreferrer"class="rp-link">Follow this guide on how to set it up</a>.</p>
<p>Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers.</p>
<divclass="rp-callout rp-callout--note"><divclass="rp-callout__title">Text string validation</div><divclass="rp-callout__content"><p>Test Renderer enforces React Native's requirement that text strings must be rendered within a <code><Text></code> component. If you render a <code>string</code> value under components other than <code><Text></code> (e.g., under <code><View></code>), it throws an <code>Invariant Violation: Text strings must be rendered within a <Text> component</code> error. This matches React Native's runtime behavior.</p><p>This validation is always enabled and cannot be disabled. Your tests will catch the same text rendering errors that would occur in production.</p></div></div>
<p>The <code>render</code> function returns a promise that resolves to the same queries and utilities as the <ahref="/react-native-testing-library/docs/api/screen"class="rp-link"><code>screen</code></a> object. Use <code>screen</code> for queries and the lifecycle methods from the render result when needed.</p>
<p>See <ahref="https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen"target="_blank"rel="noopener noreferrer"class="rp-link">this article</a> from Kent C. Dodds for more details.</p>
<divclass="rp-callout rp-callout--note"><divclass="rp-callout__title">Type information</div><divclass="rp-callout__content"><p>Query results and element references use the <code>TestInstance</code> type from <ahref="https://github.com/mdjastrzebski/test-renderer"target="_blank"rel="noopener noreferrer"class="rp-link">Test Renderer</a>. If you need to type element variables, import this type directly from <code>test-renderer</code>.</p></div></div><!--/$--></div><divclass="container-uhcWmO"><imgclass="logo-IwzwG8"src="/react-native-testing-library/static/image/abstract-atom.4eca0300ff.avif"alt="Abstract Logo"aria-hidden="true"/><divclass="content-uJxcIj"><divclass="headlineContainer-NHNT4y"><h1class="headline-iCUUUl">Need React or React Native
expertise you can count on?</h1></div><divclass="buttonContainer-wOj8Y6"><divclass="dark"><ahref="https://www.callstack.com/contact"class="button-DogSnd brand-rT2ahT ">Let's talk<svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16"class="button-icon-Okk0hT"aria-hidden="true"focusable="false"><pathfill="currentColor"d="M9.333 13.333h1.334V12H9.333zm-6.666-2.666h8V12H12v-1.333h1.333V9.333H12V8h-1.333v1.333H4V2.667H2.667zM9.333 8h1.334V6.667H9.333z"></path></svg></a></div></div></div></div><footerclass="rp-doc-footer"><divclass="rp-doc-footer__edit"></div><divclass="rp-doc-footer__divider"></div><divclass="container-aZLxg0"><ahref="/react-native-testing-library/docs/start/migration-v14"class="pagerLink-_WIlZJ rp-link"><spanclass="iconBox-AUO0Le"><svgxmlns="http://www.w3.org/2000/svg"width="24"height="24"fill="currentColor"viewBox="0 0 24 24"class="icon-WRLCnG"><pathd="M4 20h2V4H4zm8-5v2h2v-2zm-2-4H8v2h2v2h2v-2h8v-2h-8V9h-2zm2-2h2V7h-2z"></path></svg></span><spanclass="textWrap-lmdyLc"><spanclass="desc-sp3vRh">Previous page</span><spanclass="title-hrit_i">v14 Migration</span></span></a><ahref="/react-native-testing-library/docs/api/screen"class="pagerLink-_WIlZJ next-axkYXz rp-link"><spanclass="textWrap-lmdyLc"><spanclass="desc-sp3vRh">Next page</span><spanclass="title-hrit_i">Screen object</span></span><spanclass="iconBox-AUO0Le"><svgxmlns="http://www.w3.org/2000/svg"width="24"height="24"fill="currentColor"viewBox="0 0 24 24"class="icon-WRLCnG"><pathd="M20 20h-2V4h2zm-8-5v2h-2v-2zm2-4h2v2h-2v2h-2v-2H4v-2h8V9h2zm-2-2h-2V7h2z"></path></svg></span></a></div></footer></main></div><asideclass="rp-doc-layout__outline rp-scrollbar"><divclass="rp-outline"><divclass="rp-outline__title">Contents<svgwidth="14"height="14"class="rp-progress-circle"><circlecx="7"cy="7"r="6"stroke-linecap="round"fill="none"stroke="var(--rp-c-divider-light)"stroke-width="2"></circle><circlecx="7"cy="7"r="6"stroke-linecap="round"fill="none"stroke="var(--rp-c-brand)"stroke-width="2"stroke-dasharray="37.69911184307752"stroke-dashoffset="37.69911184307752"transform="rotate(-90 7 7)"style="transition:stroke-dashoffset 0.3s"></circle></svg></div><navclass="rp-outline__toc rp-scrollbar"><ahref="#render"class="rp-toc-item rp-link"title="render function"style="padding-left:0"data-depth="0"><spanclass="rp-toc-item__text rp-doc"><code>render</code> function</span></a><ahref="#options"class="rp-toc-item rp-link"title="Options"style="padding-left:12px"data-depth="1"><spanclass="rp-toc-item__text rp-doc">Options</span></a><ahref="#wrapper"class="rp-toc-item rp-link"title="wrapper"style="padding-left:24px"data-depth="2"><spanclass="rp-toc-item__text rp-doc"><code>wrapper</code></span></a><ahref="#result"class="rp-toc-item rp-link"title="Result"style="padding-left:12px"data-depth="1"><spanclass="rp-toc-item__text rp-doc">Result</span></a></nav><divclass="rp-outline__divider"></div><divclass="rp-outline__bottom"></div></div><divclass="rp-outline__divider"></div><divclass="container-LzbylO"><div><divclass="headline-y75_LS">Need help with React or React Native projects?</div><divclass="description-muYVs3">We support teams building scalable apps with React and React Native.</div></div><ahref="https://www.callstack.com/contact"class="button-DogSnd brand-rT2ahT ">Let's talk<svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16"class="button-icon-Okk0hT"aria-hidden="true"focusable="false"><pathfill="currentColor"d="M9.333 13.333h1.334V12H9.333zm-6.666-2.666h8V12H12v-1.333h1.333V9.333H12V8h-1.333v1.333H4V2.667H2.667zM9.333 8h1.334V6.667H9.333z"></path></svg></a></div></aside></div></div>
