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-01-16 13:01:34 +00:00
< link href = "/react-native-testing-library/static/css/styles.73041e5c.css" rel = "stylesheet" >
2026-01-16 11:02:15 +00:00
< script defer src = "/react-native-testing-library/static/js/styles.60254868.js" > < / script >
2026-01-16 10:02:08 +00:00
< script defer src = "/react-native-testing-library/static/js/lib-react.c776e48d.js" > < / script >
< script defer src = "/react-native-testing-library/static/js/lib-router.0998d45d.js" > < / script >
2026-01-16 11:02:15 +00:00
< script defer src = "/react-native-testing-library/static/js/8712.b675ec06.js" > < / script >
2026-01-16 13:01:34 +00:00
< script defer src = "/react-native-testing-library/static/js/index.6c2873da.js" > < / script >
2026-01-16 10:02:08 +00:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "generator" content = "Rspress v2.0.0-rc.5" >
< meta property = "og:url" content = "https://callstack.github.io/react-native-testing-library/" >
< 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-01-16 13:01:34 +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.4eca0300.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" > < img src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjY2NjUgMTQuNjY2NEgxMy4zMzM1VjEzLjMzMzNIMTQuNjY2NVYxNC42NjY0Wk0xMy4zMzM1IDEzLjMzMzNIMTIuMDAwNVYxMi4wMDAzSDEzLjMzMzVWMTMuMzMzM1pNOS4zMzM1IDEyLjAwMDNINC4wMDA0OVYxMC42NjY0SDkuMzMzNVYxMi4wMDAzWk0xMi4wMDA1IDEyLjAwMDNIMTAuNjY2NVYxMC42NjY0SDEyLjAwMDVWMTIuMDAwM1pNNC4wMDA0OSAxMC42NjY0SDIuNjY2NVY5LjMzMzM0SDQuMDAwNDlWMTAuNjY2NFpNMTAuNjY2NSAxMC42NjY0SDkuMzMzNVY5LjMzMzM0SDEwLjY2NjVWMTAuNjY2NFpNMi42NjY1IDkuMzMzMzRIMS4zMzM1VjQuMDAwMzRIMi42NjY1VjkuMzMzMzRaTTEyLjAwMDUgOS4zMzMzNEgxMC42NjY1VjQuMDAwMzRIMTIuMDAwNVY5LjMzMzM0Wk00LjAwMDQ5IDQuMDAwMzRIMi42NjY1VjIuNjY2MzVINC4wMDA0OVY0LjAwMDM0Wk0xMC42NjY1IDQuMDAwMzRIOS4zMzM1VjIuNjY2MzVIMTAuNjY2NVY0LjAwMDM0Wk05LjMzMzUgMi42NjYzNUg0LjAwMDQ5VjEuMzMzMzRIOS4zMzM1VjIuNjY2MzVaIiBmaWxsPSIjODM4Mjg5Ii8+Cjwvc3ZnPgo=" alt = "" class = "rp-search-button__icon" / > < 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" > < img src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjY2NjUgMTQuNjY2NEgxMy4zMzM1VjEzLjMzMzNIMTQuNjY2NVYxNC42NjY0Wk0xMy4zMzM1IDEzLjMzMzNIMTIuMDAwNVYxMi4wMDAzSDEzLjMzMzVWMTMuMzMzM1pNOS4zMzM1IDEyLjAwMDNINC4wMDA0OVYxMC42NjY0SDkuMzMzNVYxMi4wMDAzWk0xMi4wMDA1IDEyLjAwMDNIMTAuNjY2NVYxMC42NjY0SDEyLjAwMDVWMTIuMDAwM1pNNC4wMDA0OSAxMC42NjY0SDIuNjY2NVY5LjMzMzM0SDQuMDAwNDlWMTAuNjY2NFpNMTAuNjY2NSAxMC42NjY0SDkuMzMzNVY5LjMzMzM0SDEwLjY2NjVWMTAuNjY2NFpNMi42NjY1IDkuMzMzMzRIMS4zMzM1VjQuMDAwMzRIMi42NjY1VjkuMzMzMzRaTTEyLjAwMDUgOS4zMzMzNEgxMC42NjY1VjQuMDAwMzRIMTIuMDAwNVY5LjMzMzM0Wk00LjAwMDQ5IDQuMDAwMzRIMi42NjY1VjIuNjY2MzVINC4wMDA0OVY0LjAwMDM0Wk0xMC42NjY1IDQuMDAwMzRIOS4zMzM1VjIuNjY2MzVIMTAuNjY2NVY0LjAwMDM0Wk05LjMzMzUgMi42NjYzNUg0LjAwMDQ5VjEuMzMzMzRIOS4zMzM1VjIuNjY2MzVaIiBmaWxsPSIjODM4Mjg5Ii8+Cjwvc3ZnPgo=" alt = "" / > < / div > < ul class = "rp-nav-menu rp-nav-menu--right" > < li class = "rp-nav-menu__item rp-nav-menu__item--active rspress-nav-menu-item rspress-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 rspress-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 rspress-nav-menu-item" > < a href = "https://github.com/callstack/react-native-testing-library/tree/main/examples" target = "_blank" rel = "noopener noreferrer" 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< img src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNSA4LjVINy41VjkuNUg2LjVWMTAuNUg1LjVWOS41SDQuNVY4LjVINS41VjIuNUg2LjVWOC
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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 recommended using the < code > screen< / code > object as more developer-friendly way.< / p >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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 = "#22a041" 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 = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy" > < path fill = "currentColor" d = "M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2" > < / path > < path fill = "currentColor" d = "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" > < / path > < / svg > < svg width = "32" height = "32" viewBox = "0 0 30 30" class = "rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< 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 >
< 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. We recommend using the < code > screen< / code > object for queries and the lifecycle methods from the render result when needed.< / p >
< 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.4eca0300.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 = "rp-prev-next-page" > < a href = "/react-native-testing-library/docs/start/quick-start" class = "rp-prev-next-page__item rp-prev-next-page__prev rp-link" > < span class = "rp-prev-next-page__item__desc" > Previous page< / span > < span class = "rp-prev-next-page__item__title" > < img src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNSA0LjVINy41VjMuNUg2LjVWMi41SDUuNVYzLjVINC41VjQuNUg1LjVWMTAuNUg2LjVWNC41Wk00LjUgNC41SDMuNVY1LjVINC41VjQuNVpNOC41IDQuNUg3LjVWNS41SDguNVY0LjVaTTMuNSA2LjVWNS41SDIuNVY2LjVIMy41Wk05LjUgNS41SDguNVY2LjVIOS41VjUuNVoiIGZpbGw9IiNCQ0JCQzIiLz4KPC9zdmc+Cg==" alt = "" class = "rp-prev-next-page__icon rp-prev-next-page__rotate_180" / > < span > Quick Start< / span > < / span > < / a > < a href = "/react-native-testing-library/docs/api/screen" class = "rp-prev-next-page__item rp-prev-next-page__next rp-link" > < span class = "rp-prev-next-page__item__desc" > Next page< / span > < span class = "rp-prev-next-page__item__title" > < span > Screen object< / span > < img src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNSA0LjVINy41VjMuNUg2LjVWMi41SDUuNVYzLjVINC41VjQuNUg1LjVWMTAuNUg2LjVWNC41Wk00LjUgNC41SDMuNVY1LjVINC41VjQuNVpNOC41IDQuNUg3LjVWNS41SDguNVY0LjVaTTMuNSA2LjVWNS41SDIuNVY2LjVIMy41Wk05LjUgNS41SDguNVY2LjVIOS41VjUuNVoiIGZpbGw9IiNCQ0JCQzIiLz4KPC9zdmc+Cg==" alt = "" class = "rp-prev-next-page__icon" / > < / span > < / a > < / div > < / footer > < / main > < / div > < aside class = "rp-doc-layout__outline rp-scrollbar" > < div class = "rp-outline__divider" > < / div > < div class = "container-LzbylO" > < div > < div class = "headline-y75_LS" > Need help with React or React Native projects?< / div > < div class = "description-muYVs3" > We support teams building scalable apps with React and React Native.< / div > < / div > < 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 > < / aside > < / div > < / div >
< div id = "__rspress_modal_container" > < / div >
2025-07-14 21:16:44 +00:00
< / body >
< / html >
