2025-07-14 21:16:44 +00:00
<!doctype html>
< html lang = "en" >
2026-01-16 10:02:08 +00:00
< head > < meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > `render` API - React Native Testing Library< / title >
< script > { ; const saved = localStorage . getItem ( 'rspress-theme-appearance' ) ; const preferDark = window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ; const isDark = ! saved || saved === 'auto' ? preferDark : saved === 'dark' ; document . documentElement . classList . toggle ( 'dark' , isDark ) ; document . documentElement . classList . toggle ( 'rp-dark' , isDark ) ; document . documentElement . style . colorScheme = isDark ? 'dark' : 'light' ; } < / script >
2026-04-13 18:17:49 +00:00
< link href = "/react-native-testing-library/static/css/styles.89185f7811.css" rel = "stylesheet" >
< script defer src = "/react-native-testing-library/static/js/styles.68ae892e1a.js" > < / script >
< script defer src = "/react-native-testing-library/static/js/lib-react.49604bf759.js" > < / script >
< script defer src = "/react-native-testing-library/static/js/lib-router.a0df4de158.js" > < / script >
< script defer src = "/react-native-testing-library/static/js/2482.4740a55c68.js" > < / script >
2026-05-28 08:18:05 +00:00
< script defer src = "/react-native-testing-library/static/js/index.c4ce2d3610.js" > < / script >
2026-01-16 10:02:08 +00:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2026-04-13 18:17:49 +00:00
< meta name = "generator" content = "Rspress v2.0.9" >
2026-01-20 22:28:10 +00:00
< meta property = "og:url" content = "https://oss.callstack.com/react-native-testing-library/" >
2026-01-16 10:02:08 +00:00
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "`render` API - React Native Testing Library" >
< meta property = "og:description" content = "Helps you to write better tests with less effort." >
2026-01-16 13:01:34 +00:00
< link rel = "icon" href = "/react-native-testing-library/logo-light.png" >
2026-01-16 10:02:08 +00:00
< meta name = "description" content = "Helps you to write better tests with less effort." > < / head >
2025-07-14 21:16:44 +00:00
2026-01-16 10:02:08 +00:00
< body >
2026-04-13 18:17:49 +00:00
< div id = "__rspress_root" > < link rel = "preload" as = "image" href = "/react-native-testing-library/img/logo-light.svg" / > < link rel = "preload" as = "image" href = "/react-native-testing-library/img/logo-dark.svg" / > < link rel = "preload" as = "image" href = "/react-native-testing-library/static/image/abstract-atom.4eca0300ff.avif" / > < header class = "rp-nav" > < div class = "rp-nav__left" > < div class = "rp-nav__title" > < a href = "/react-native-testing-library/" class = "rp-nav__title__link rp-link" > < div class = "rp-nav__title__logo" > < img src = "/react-native-testing-library/img/logo-light.svg" alt = "logo" id = "logo" class = "rspress-logo rp-nav__title__logo-image rp-nav__title__logo-image--light" / > < img src = "/react-native-testing-library/img/logo-dark.svg" alt = "logo" id = "logo" class = "rspress-logo rp-nav__title__logo-image rp-nav__title__logo-image--dark" / > < / div > < / a > < / div > < / div > < div class = "rp-nav__right" > < button class = "rp-search-button" > < div class = "rp-search-button__content" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "none" viewBox = "0 0 16 16" class = "rp-search-button__icon" > < path fill = "#838289" d = "M14.667 14.666h-1.333v-1.333h1.332zm-1.333-1.333H12V12h1.333zm-4-1.333H4v-1.334h5.334zM12 12h-1.335v-1.334h1.335zm-8-1.334H2.665V9.333H4zm6.665 0H9.334V9.333h1.332zm-8-1.333H1.335V4h1.333zm9.335 0h-1.335V4h1.335zM4 4H2.665V2.666H4zm6.665 0H9.334V2.666h1.332zM9.334 2.666H4V1.333h5.334z" > < / path > < / svg > < span class = "rp-search-button__word" > Search< / span > < / div > < div class = "rp-search-button__hotkey" style = "opacity:0" > < span > < / span > < span > K< / span > < / div > < / button > < div class = "rp-search-button--mobile" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "none" viewBox = "0 0 16 16" > < path fill = "#838289" d = "M14.667 14.666h-1.333v-1.333h1.332zm-1.333-1.333H12V12h1.333zm-4-1.333H4v-1.334h5.334zM12 12h-1.335v-1.334h1.335zm-8-1.334H2.665V9.333H4zm6.665 0H9.334V9.333h1.332zm-8-1.333H1.335V4h1.333zm9.335 0h-1.335V4h1.335zM4 4H2.665V2.666H4zm6.665 0H9.334V2.666h1.332zM9.334 2.666H4V1.333h5.334z" > < / path > < / svg > < / div > < ul class = "rp-nav-menu rp-nav-menu--right" > < li class = "rp-nav-menu__item rp-nav-menu__item--active" > < a href = "/react-native-testing-library/docs/start/intro" class = "rp-nav-menu__item__container rp-link" > Docs< / a > < / li > < li class = "rp-nav-menu__item" > < a href = "/react-native-testing-library/cookbook/" class = "rp-nav-menu__item__container rp-link" > Cookbook< / a > < / li > < li class = "rp-nav-menu__item" > < a href = "https://github.com/callstack/react-native-testing-library/tree/main/examples" target = "_blank" class = "rp-nav-menu__item__container rp-link" > Examples< / a > < / li > < / ul > < div class = "rp-nav__others" > < div class = "rp-nav-menu__divider" > < / div > < li class = "rp-nav-menu__item" > < div class = "rp-nav-menu__item__container" > 13.x< svg xmlns = "http://www.w3.org/2000/svg" width = "12" height = "13" viewBox = "0 0 12 13" class = "rp-nav-menu__item__icon" > < path fill = "currentColor" d = "M6.5 8.5h1v1h-1v1h-1v-1h-1v-1h1v-6h1zm-2 0h-1v-1h1zm4 0h-1v-1h1zm-5-2v1h-1v-1zm6 1h-1v-1h1z" > < / path > < / svg > < / div > < ul class = "rp-hover-group rp-hover-group--hidden rp-hover-group--center" > < li class = "rp-hover-group__item" style = "padding-left:8px" data-depth = "0" > < a href = "/react-native-testing-library/12.x/docs/api/render" class = "rp-hover-group__item__link rp-link" aria-label = "12.x" > 12.x< / a > < / li > < li class = "rp-hover-group__item rp-hover-group__item--active" style = "padding-left:8px" data-depth = "0" > < a href = "/react-native-testing-library/api/render" class = "rp-hover-group__item__link rp-link" aria-label = "13.x" > 13.x< / a > < / li > < li class = "rp-hover-group__item" style = "padding-left:8px" data-depth = "0" > < a href = "/react-native-testing-library/14.x/docs/api/render" class = "rp-hover-group__item__link rp-link" aria-label = "14.x" > 14.x< / a > < / li > < / ul > < / li > < div role = "button" tabindex = "0" class = "rspress-nav-appearance" > < div class = "rp-p-1 rp-border rp-border-solid rp-border-gray-300 rp-text-gray-400 rp-cursor-pointer rp-rounded-md rp-transition-all rp-duration-300 rp-w-7 rp-h-7" > < svg xmlns = "http://www.w3.org/2000/svg" width = "18" height = "18" fill = "currentColor" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M18 22H8v-2h10zM8 20H6v-2h2zm12 0h-2v-2h2zM6
2026-01-16 10:02:08 +00:00
<h2 class=" rp-toc-include " id = "render" > < a href = "#render" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > render< / code > function< / h2 >
< div class = "rp-codeblock language-jsx" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "jsx" > < code > < span class = "line" > < span style = "color:var(--shiki-token-keyword)" > function< / span > < span style = "color:var(--shiki-token-function)" > render< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > component< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > React< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-function)" > Element< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-constant)" > any< / span > < span style = "color:var(--shiki-foreground)" > > < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > options< / span > < span style = "color:var(--shiki-token-keyword)" > ?:< / span > < span style = "color:var(--shiki-token-function)" > RenderOptions< / span > < / span >
2026-04-13 18:17:49 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > )< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > RenderResult< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< 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 components' structure.< / p >
< div class = "rp-codeblock language-jsx" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "jsx" > < code > < span class = "line" > < span style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { render< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > screen } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' @testing-library/react-native' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > test< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' basic test' < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > () < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > render< / span > < span style = "color:var(--shiki-foreground)" > (< < / span > < span style = "color:var(--shiki-token-constant)" > MyApp< / span > < span style = "color:var(--shiki-foreground)" > /> );< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > expect< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > screen< / span > < span style = "color:var(--shiki-token-function)" > .getAllByRole< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' button' < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > { name< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-string-expression)" > ' start' < / span > < span style = "color:var(--shiki-foreground)" > }))< / span > < span style = "color:var(--shiki-token-function)" > .toBeOnTheScreen< / span > < span style = "color:var(--shiki-foreground)" > ();< / span > < / span >
2026-04-13 18:17:49 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< blockquote >
< p > 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 < code > render< / code > < a href = "https://testing-library.com/docs/react-testing-library/setup#custom-render" target = "_blank" rel = "noopener noreferrer" class = "rp-link" > Follow this great guide on how to set this up< / a > .< / p >
2024-05-24 13:14:27 +00:00
< / blockquote >
2026-01-16 10:02:08 +00:00
< h3 class = "rp-toc-include" id = "options" > < a href = "#options" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Options< / h3 >
< p > The behavior of the < code > render< / code > method can be customized by passing various options as a second argument of the < code > RenderOptions< / code > type:< / p >
< h4 class = "rp-toc-include" id = "wrapper" > < a href = "#wrapper" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > wrapper< / code > < / h4 >
2026-04-13 18:17:49 +00:00
< div class = "rp-codeblock language-ts" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "ts" > < code > < span class = "line" > < span style = "color:var(--shiki-foreground)" > wrapper< / span > < span style = "color:var(--shiki-token-keyword)" > ?:< / span > < span style = "color:var(--shiki-token-constant)" > React< / span > < span style = "color:var(--shiki-foreground)" > .ComponentType< / span > < span style = "color:var(--shiki-token-keyword)" > < < / span > < span style = "color:var(--shiki-foreground)" > any< / span > < span style = "color:var(--shiki-token-keyword)" > > < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< p > This option allows you to wrap the tested component, passed as the first option to the < code > render()< / code > < / p >
< h4 class = "rp-toc-include" id = "concurrent-root" > < a href = "#concurrent-root" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > concurrentRoot< / code > < / h4 >
< p > Set to < code > false< / code > to disable concurrent rendering.
2025-01-14 12:04:32 +00:00
Otherwise, < code > render< / code > will default to using concurrent rendering used in the React Native New Architecture.< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "create-node-mock" > < a href = "#create-node-mock" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > createNodeMock< / code > < / h4 >
2026-04-13 18:17:49 +00:00
< div class = "rp-codeblock language-ts" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "ts" > < code > < span class = "line" > < span style = "color:var(--shiki-foreground)" > createNodeMock< / span > < span style = "color:var(--shiki-token-keyword)" > ?:< / span > < span style = "color:var(--shiki-foreground)" > (element< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > React< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-function)" > Element< / span > < span style = "color:var(--shiki-foreground)" > ) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > unknown< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< p > This option allows you to pass < code > createNodeMock< / code > option to < code > ReactTestRenderer.create()< / code > method in order to allow for custom mock refs. You can learn more about this option from < a href = "https://reactjs.org/docs/test-renderer.html#ideas" target = "_blank" rel = "noopener noreferrer" class = "rp-link" > React Test Renderer documentation< / a > .< / p >
< h4 class = "rp-toc-include" id = "unstable_validatestringsrenderedwithintext" > < a href = "#unstable_validatestringsrenderedwithintext" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > unstable_validateStringsRenderedWithinText< / code > < / h4 >
2026-04-13 18:17:49 +00:00
< div class = "rp-codeblock language-ts" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "ts" > < code > < span class = "line" > < span style = "color:var(--shiki-foreground)" > unstable_validateStringsRenderedWithinText< / span > < span style = "color:var(--shiki-token-keyword)" > ?:< / span > < span style = "color:var(--shiki-foreground)" > boolean;< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< div class = "rp-callout rp-callout--note" > < div class = "rp-callout__title" > Note< / div > < div class = "rp-callout__content" > < p >
This options is experimental, in some cases it might not work as intended, and its behavior might change without observing < a href = "https://semver.org/" target = "_blank" rel = "noopener noreferrer" class = "rp-link" > SemVer< / a > requirements for breaking changes.< / p > < / div > < / div >
< p > This < strong > experimental< / strong > option allows you to replicate React Native behavior of throwing < code > Invariant Violation: Text strings must be rendered within a < Text> component< / code > error when you try to render < code > string< / code > value under components different than < code > < Text> < / code > , e.g., under < code > < View> < / code > .< / p >
< p > 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.< / p >
< h3 class = "rp-toc-include" id = "result" > < a href = "#result" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Result< / h3 >
2026-01-20 22:28:10 +00:00
< p > The < code > render< / code > function returns the same queries and utilities as the < a href = "/react-native-testing-library/docs/api/screen" class = "rp-link" > < code > screen< / code > < / a > object. We recommend using the < code > screen< / code > object for a more developer-friendly experience.< / p >
2026-01-16 10:02:08 +00:00
< p > See < a href = "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 >
< h2 class = "rp-toc-include" id = "render-async" > < a href = "#render-async" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > renderAsync< / code > function< / h2 >
< div class = "rp-callout rp-callout--info" > < div class = "rp-callout__title" > RNTL minimal version< / div > < div class = "rp-callout__content" > < p > This API requires RNTL v13.3.0 or later.< / p > < / div > < / div >
< div class = "rp-codeblock language-tsx" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "tsx" > < code > < span class = "line" > < span style = "color:var(--shiki-token-keyword)" > async< / span > < span style = "color:var(--shiki-token-keyword)" > function< / span > < span style = "color:var(--shiki-token-function)" > renderAsync< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > component< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > React< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-function)" > Element< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-constant)" > any< / span > < span style = "color:var(--shiki-foreground)" > > < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > options< / span > < span style = "color:var(--shiki-token-keyword)" > ?:< / span > < span style = "color:var(--shiki-token-function)" > RenderAsyncOptions< / span > < / span >
2026-04-13 18:17:49 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > )< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > Promise< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-function)" > RenderAsyncResult< / span > < span style = "color:var(--shiki-foreground)" > > ;< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< p > The < code > renderAsync< / code > function is the async version of < a href = "#render" class = "rp-link" > < code > render< / code > < / a > designed for working with React 19 and React Suspense. This function uses async < code > act< / code > function internally to ensure all pending React updates are executed during rendering.< / p >
< div class = "rp-codeblock language-jsx" > < div class = "rp-codeblock__content" > < div class = "rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always" > < pre class = "shiki css-variables" style = "background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex = "0" data-lang = "jsx" > < code > < span class = "line" > < span style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { renderAsync< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > screen } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' @testing-library/react-native' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > test< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' async component test' < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-keyword)" > async< / span > < span style = "color:var(--shiki-foreground)" > () < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > renderAsync< / span > < span style = "color:var(--shiki-foreground)" > (< < / span > < span style = "color:var(--shiki-token-constant)" > MyAsyncApp< / span > < span style = "color:var(--shiki-foreground)" > /> );< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > expect< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > screen< / span > < span style = "color:var(--shiki-token-function)" > .getAllByRole< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' button' < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > { name< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-string-expression)" > ' start' < / span > < span style = "color:var(--shiki-foreground)" > }))< / span > < span style = "color:var(--shiki-token-function)" > .toBeOnTheScreen< / span > < span style = "color:var(--shiki-foreground)" > ();< / span > < / span >
2026-04-13 18:17:49 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span > < / code > < / pre > < / div > < div class = "rp-code-button-group" > < button class = "rp-code-button-group__button rp-code-wrap-button" title = "Toggle code wrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrapped" > < path fill = "currentColor" d = "M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "rp-code-button-group__icon rp-code-button-group__icon--wrap" > < path fill = "currentColor" d = "M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z" > < / path > < / svg > < / button > < button class = "rp-code-button-group__button rp-code-copy-button" title = "Copy code" > < svg xmlns = "http://www.w3.org/2000/svg" width = "272" height = "272" viewBox = "0 0 272 272" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" fill-rule = "evenodd" d = "M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule = "evenodd" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" width = "271" height = "271" viewBox = "0 0 271 271" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "currentColor" d = "M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z" > < / path > < / svg > < / button > < / div > < / div > < / div >
2026-01-16 10:02:08 +00:00
< h3 class = "rp-toc-include" id = "options-1" > < a href = "#options-1" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Options< / h3 >
< p > < code > renderAsync< / code > accepts the same options as < code > render< / code > .< / p >
< h3 class = "rp-toc-include" id = "result-1" > < a href = "#result-1" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Result< / h3 >
2026-01-20 22:28:10 +00:00
< p > The < code > renderAsync< / code > function returns a promise that resolves to the same queries and utilities as the < a href = "/react-native-testing-library/docs/api/screen" class = "rp-link" > < code > screen< / code > < / a > object. Use the < code > screen< / code > object for queries and the lifecycle methods from the render result when needed.< / p >
2026-04-13 18:17:49 +00:00
< div class = "rp-callout rp-callout--warning" > < div class = "rp-callout__title" > Async lifecycle methods< / div > < div class = "rp-callout__content" > < p > When using < code > renderAsync< / code > , you have to use correspodning lifecycle methods: < code > rerenderAsync< / code > and < code > unmountAsync< / code > instead of their sync versions.< / p > < / div > < / div > <!-- /$ --> < / div > < div class = "container-uhcWmO" > < img class = "logo-IwzwG8" src = "/react-native-testing-library/static/image/abstract-atom.4eca0300ff.avif" alt = "Abstract Logo" aria-hidden = "true" / > < div class = "content-uJxcIj" > < div class = "headlineContainer-NHNT4y" > < h1 class = "headline-iCUUUl" > Need React or React Native
expertise you can count on?< / h1 > < / div > < div class = "buttonContainer-wOj8Y6" > < div class = "dark" > < a href = "https://www.callstack.com/contact" class = "button-DogSnd brand-rT2ahT " > Let' s talk< svg xmlns = "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" > < path fill = "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 > < footer class = "rp-doc-footer" > < div class = "rp-doc-footer__edit" > < / div > < div class = "rp-doc-footer__divider" > < / div > < div class = "container-aZLxg0" > < a href = "/react-native-testing-library/docs/start/quick-start" class = "pagerLink-_WIlZJ rp-link" > < span class = "iconBox-AUO0Le" > < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "currentColor" viewBox = "0 0 24 24" class = "icon-WRLCnG" > < path d = "M4 20h2V4H4zm8-5v2h2v-2zm-2-4H8v2h2v2h2v-2h8v-2h-8V9h-2zm2-2h2V7h-2z" > < / path > < / svg > < / span > < span class = "textWrap-lmdyLc" > < span class = "desc-sp3vRh" > Previous page< / span > < span class = "title-hrit_i" > Quick Start< / span > < / span > < / a > < a href = "/react-native-testing-library/docs/api/screen" class = "pagerLink-_WIlZJ next-axkYXz rp-link" > < span class = "textWrap-lmdyLc" > < span class = "desc-sp3vRh" > Next page< / span > < span class = "title-hrit_i" > Screen object< / span > < / span > < span class = "iconBox-AUO0Le" > < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "currentColor" viewBox = "0 0 24 24" class = "icon-WRLCnG" > < path d = "M20 20h-2V4h2zm-8-5v2h-2v-2zm2-4h2v2h-2v2h-2v-2H4v-2h8V9h2zm-2-2h-2V7h2z" > < / path > < / svg > < / span > < / a > < / div > < / footer > < / main > < / div > < aside class = "rp-doc-layout__outline rp-scrollbar" > < div class = "rp-outline" > < div class = "rp-outline__title" > Contents< svg width = "14" height = "14" class = "rp-progress-circle" > < circle cx = "7" cy = "7" r = "6" stroke-linecap = "round" fill = "none" stroke = "var(--rp-c-divider-light)" stroke-width = "2" > < / circle > < circle cx = "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 > < nav class = "rp-outline__toc rp-scrollbar" > < a href = "#render" class = "rp-toc-item rp-link" title = "render function" style = "padding-left:0" data-depth = "0" > < span class = "rp-toc-item__text rp-doc" > < code > render< / code > function< / span > < / a > < a href = "#options" class = "rp-toc-item rp-link" title = "Options" style = "padding-left:12px" data-depth = "1" > < span class = "rp-toc-item__text rp-doc" > Options< / span > < / a > < a href = "#wrapper" class = "rp-toc-item rp-link" title = "wrapper" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > wrapper< / code > < / span > < / a > < a href = "#concurrent-root" class = "rp-toc-item rp-link" title = "concurrentRoot" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > concurrentRoot< / code > < / span > < / a > < a href = "#create-node-mock" class = "rp-toc-item rp-link" title = "createNodeMock" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > createNodeMock< / code > < / span > < / a > < a href = "#unstable_validatestringsrenderedwithintext" class = "rp-toc-item rp-link" title = "unstable_validateStringsRenderedWithinText" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > unstable_validateStringsRenderedWithinText< / code > < / span > < / a > < a href = "#result" class = "rp-toc-item rp-link" title = "Result" style = "padding-left:12px" data-depth = "1" > < span class = "rp-toc-item__text rp-doc" > Result< / span > < / a > < a href = "#render-async" class = "rp-toc-item rp-link" title = "renderAsync function" style = "padding-left:0" data-depth = "0" > < span class = "rp-toc-item__text rp-doc" > < code > renderAsync< / code > function< / span > < / a > < a href = "#options-1" class = "rp-toc-item rp-link" title = "Options" style = "padding-left:12px" data-depth = "1" > < span class = "rp-toc-item__text rp-doc" > Options< / span > < / a > < a href = "#result-1" class = "rp-toc-item rp-link" title = "Result" style = "padding-left:12px" d
2026-01-16 10:02:08 +00:00
< div id = "__rspress_modal_container" > < / div >
2025-07-14 21:16:44 +00:00
< / body >
< / html >
