2024-08-25 15:16:23 +00:00
<!doctype html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width,initial-scale=1" > < meta name = "generator" content = "Rspress v1.20.1" > < title data-rh = "true" > `render` function - React Native Testing Library< / title > < meta data-rh = "true" name = "description" content = "Helps you to write better tests with less effort." / > < script > { const e = localStorage . getItem ( "rspress-theme-appearance" ) , t = window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches , a = e && "auto" !== e ? "dark" === e : t ; document . documentElement . classList . toggle ( "dark" , a ) , document . documentElement . style . colorScheme = a ? "dark" : "light" } < / script > < title > React Native Testing Library< / title > < meta property = "og:url" content = "https://callstack.github.io/react-native-testing-library/" > < meta property = "og:type" content = "website" > < meta property = "og:title" content = "React Native Testing Library" > < meta property = "og:description" content = "Helps you to write better tests with less effort." > < link rel = "icon" href = "/react-native-testing-library/owl.png" > < script defer = "defer" src = "/react-native-testing-library/static/js/styles.f5a571b6.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/lib-lodash.758a0420.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/lib-polyfill.4a4d4658.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/lib-react.1649e75a.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/lib-router.a366061e.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/539.9483874d.js" > < / script > < script defer = "defer" src = "/react-native-testing-library/static/js/index.9afb9247.js" > < / script > < link href = "/react-native-testing-library/static/font/open-sans.b9e06949.woff2" rel = "preload" as = "font" crossorigin = "" > < link href = "/react-native-testing-library/static/css/styles.313fd107.css" rel = "stylesheet" > < / head > < body > < div id = "root" > < div > < div class = "navContainer_f6cde rspress-nav px-6 " style = "position:sticky" > < div class = "container_f6cde flex justify-between items-center h-full" > < div class = "navBarTitle_f6cde" > < a href = "/react-native-testing-library/" class = "flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60" > < img src = "/react-native-testing-library/img/owl.png" alt = "logo" id = "logo" class = "mr-4 rspress-logo" / > < span > React Native Testing Library< / span > < / a > < / div > < div class = "flex flex-1 justify-end items-center" > < div class = "rightNav_f6cde" > < div class = "flex sm:flex-1 items-center sm:pl-4 sm:pr-2" > < div class = "rspress-nav-search-button navSearchButton_6e282" > < button > < svg width = "18" height = "18" viewBox = "0 0 32 32" > < path fill = "var(--rp-c-gray)" d = "m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" > < / path > < / svg > < p class = "searchWord_6e282" > Search Docs< / p > < div style = "opacity:0" > < span > < / span > < span > K< / span > < / div > < / button > < / div > < div class = "mobileNavSearchButton_6e282" > < svg width = "24" height = "24" viewBox = "0 0 32 32" > < path fill = "var(--rp-c-gray)" d = "m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" > < / path > < / svg > < / div > < / div > < div class = "rspress-nav-menu menu h-14" > < a class = "link_03735 undefined rspress-link cursor-pointer" target = "" href = "/react-native-testing-library/docs/start/intro" > < div class = "rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center" > Docs< / div > < / a > < a class = "link_03735 undefined rspress-link cursor-pointer" target = "" href = "/react-native-testing-library/cookbook/index" > < div class = "rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center" > Cookbook< / div > < / a > < a href = "https://github.com/callstack/react-native-testing-library/tree/main/examples" target = "_blank" rel = "noopener noreferrer" class = "link_03735 undefined rspress-link" > < div class = "rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center" > Exa
2024-05-24 13:14:27 +00:00
< div class = "language-jsx" > < div class = "rspress-code-content rspress-scrollbar" > < div > < pre class = "code" style = "background-color:inherit" > < code class = "language-jsx" style = "white-space:pre" > < span style = "display:block;padding:0 1.25rem" > < span class = "token" style = "color:var(--code-token-keyword)" > function< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-function)" > render< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span >
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > component< / span > < span class = "token operator" > :< / span > < span > React< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > .< / span > < span > Element< / span > < span class = "token operator" > < < / span > < span class = "token" style = "color:var(--code-token-symbol)" > any< / span > < span class = "token operator" > > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < span >
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > options< / span > < span class = "token operator" > ?< / span > < span class = "token operator" > :< / span > < span > RenderOptions
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token operator" > :< / span > < span > RenderResult< / span > < / span > < / code > < / pre > < / div > < div class = "code-button-group_15153" > < button > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "icon-wrapped_15153" > < 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 = "icon-wrap_15153" > < path fill = "currentColor" d = "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z" > < / path > < / svg > < / button > < button class = "code-copy-button_15153" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 30 30" class = "icon-copy_15153" > < path fill = "currentColor" d = "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" > < / 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 = "icon-success_15153" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< p class = "my-4 leading-7" > 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 >
2024-08-25 15:16:23 +00:00
< div class = "language-jsx" > < div class = "rspress-code-content rspress-scrollbar" > < div > < pre class = "code" style = "background-color:inherit" > < code class = "language-jsx" style = "white-space:pre" > < span style = "display:block;padding:0 1.25rem" > < span class = "token" style = "color:var(--code-token-keyword)" > import< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > {< / span > < span > render< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < span > screen < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > }< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-keyword)" > from< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-string)" > ' @testing-library/react-native' < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ;< / span > < span >
2024-05-24 13:14:27 +00:00
< / span > < / span > < span style = "display:block;padding:0 1.25rem" >
< / span > < span style = "display:block;padding:0 1.25rem" > < span > < / span > < span class = "token" style = "color:var(--code-token-function)" > test< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span class = "token" style = "color:var(--code-token-string)" > ' basic test' < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span > < / span > < span class = "token operator" > => < / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > {< / span > < span >
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > < / span > < span class = "token" style = "color:var(--code-token-function)" > render< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > < < / span > < span class = "token class-name" style = "color:var(--code-token-function)" > MyApp< / span > < span class = "token" style = "color:var(--code-token-function)" > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > /> < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ;< / span > < span >
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > < / span > < span class = "token" style = "color:var(--code-token-function)" > expect< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span > screen< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > .< / span > < span class = "token" style = "color:var(--code-token-function)" > getAllByRole< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span class = "token" style = "color:var(--code-token-string)" > ' button' < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > {< / span > < span > name< / span > < span class = "token operator" > :< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-string)" > ' start' < / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > }< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > .< / span > < span class = "token" style = "color:var(--code-token-function)" > toBeOnTheScreen< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ;< / span > < span >
< / span > < / span > < span style = "display:block;padding:0 1.25rem" > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > }< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ;< / span > < / span > < / code > < / pre > < / div > < div class = "code-button-group_15153" > < button > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "icon-wrapped_15153" > < 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 = "icon-wrap_15153" > < path fill = "currentColor" d = "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z" > < / path > < / svg > < / button > < button class = "code-copy-button_15153" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 30 30" class = "icon-copy_15153" > < path fill = "currentColor" d = "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" > < / 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 = "icon-success_15153" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< blockquote class = "border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154" >
< p class = "my-4 leading-7" > 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 target = "_blank" rel = "noopener noreferrer" href = "https://testing-library.com/docs/react-testing-library/setup#custom-render" class = "link_03735 link_3b154 inline-link_3b154 rspress-link" > Follow this great guide on how to set this up< / a > .< / p >
< / blockquote >
< h3 id = "render-options" class = "mt-10 mb-2 leading-7 text-xl title_3b154" > Options< a class = "link_3b154 header-anchor" aria-hidden = "true" href = "#render-options" > #< / a > < / h3 >
< p class = "my-4 leading-7" > 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 id = "wrapper-option" class = "mt-8 leading-6 text-base title_3b154" > < code > wrapper< / code > option< a class = "link_3b154 header-anchor" aria-hidden = "true" href = "#wrapper-option" > #< / a > < / h4 >
< div class = "language-ts" > < div class = "rspress-code-content rspress-scrollbar" > < div > < pre class = "code" style = "background-color:inherit" > < code class = "language-ts" style = "white-space:pre" > < span style = "display:block;padding:0 1.25rem" > < span > wrapper< / span > < span class = "token operator" > ?< / span > < span class = "token operator" > :< / span > < span > React< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > .< / span > < span > ComponentType< / span > < span class = "token operator" > < < / span > < span class = "token" style = "color:var(--code-token-symbol)" > any< / span > < span class = "token operator" > > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < / span > < / code > < / pre > < / div > < div class = "code-button-group_15153" > < button > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "icon-wrapped_15153" > < 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 = "icon-wrap_15153" > < path fill = "currentColor" d = "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z" > < / path > < / svg > < / button > < button class = "code-copy-button_15153" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 30 30" class = "icon-copy_15153" > < path fill = "currentColor" d = "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" > < / 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 = "icon-success_15153" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< p class = "my-4 leading-7" > This option allows you to wrap the tested component, passed as the first option to the < code > render()< / code > < / p >
< h4 id = "createnodemock-option" class = "mt-8 leading-6 text-base title_3b154" > < code > createNodeMock< / code > option< a class = "link_3b154 header-anchor" aria-hidden = "true" href = "#createnodemock-option" > #< / a > < / h4 >
< div class = "language-ts" > < div class = "rspress-code-content rspress-scrollbar" > < div > < pre class = "code" style = "background-color:inherit" > < code class = "language-ts" style = "white-space:pre" > < span style = "display:block;padding:0 1.25rem" > < span > createNodeMock< / span > < span class = "token operator" > ?< / span > < span class = "token operator" > :< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-punctuation)" > (< / span > < span > element< / span > < span class = "token operator" > :< / span > < span > React< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > .< / span > < span > Element< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > )< / span > < span > < / span > < span class = "token operator" > => < / span > < span > < / span > < span class = "token" style = "color:var(--code-token-symbol)" > unknown< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ,< / span > < / span > < / code > < / pre > < / div > < div class = "code-button-group_15153" > < button > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "icon-wrapped_15153" > < 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 = "icon-wrap_15153" > < path fill = "currentColor" d = "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z" > < / path > < / svg > < / button > < button class = "code-copy-button_15153" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 30 30" class = "icon-copy_15153" > < path fill = "currentColor" d = "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" > < / 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 = "icon-success_15153" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< p class = "my-4 leading-7" > 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 target = "_blank" rel = "noopener noreferrer" href = "https://reactjs.org/docs/test-renderer.html#ideas" class = "link_03735 link_3b154 inline-link_3b154 rspress-link" > React Test Renderer documentation< / a > .< / p >
< h4 id = "unstable_validatestringsrenderedwithintext-option" class = "mt-8 leading-6 text-base title_3b154" > < code > unstable_validateStringsRenderedWithinText< / code > option< a class = "link_3b154 header-anchor" aria-hidden = "true" href = "#unstable_validatestringsrenderedwithintext-option" > #< / a > < / h4 >
< div class = "language-ts" > < div class = "rspress-code-content rspress-scrollbar" > < div > < pre class = "code" style = "background-color:inherit" > < code class = "language-ts" style = "white-space:pre" > < span style = "display:block;padding:0 1.25rem" > < span > unstable_validateStringsRenderedWithinText< / span > < span class = "token operator" > ?< / span > < span class = "token operator" > :< / span > < span > < / span > < span class = "token" style = "color:var(--code-token-symbol)" > boolean< / span > < span class = "token" style = "color:var(--code-token-punctuation)" > ;< / span > < / span > < / code > < / pre > < / div > < div class = "code-button-group_15153" > < button > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 24 24" class = "icon-wrapped_15153" > < 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 = "icon-wrap_15153" > < path fill = "currentColor" d = "M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z" > < / path > < / svg > < / button > < button class = "code-copy-button_15153" > < svg xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 30 30" class = "icon-copy_15153" > < path fill = "currentColor" d = "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" > < / 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 = "icon-success_15153" > < path fill = "#49cd37" d = "m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z" > < / path > < / svg > < / button > < / div > < / div > < / div >
< div class = "rspress-directive note" > < div class = "rspress-directive-title" > NOTE< / div > < div class = "rspress-directive-content" > < p class = "my-4 leading-7" > This options is experimental, in some cases it might not work as intended, and its behavior might change without observing < a target = "_blank" rel = "noopener noreferrer" href = "https://semver.org/" class = "link_03735 link_3b154 inline-link_3b154 rspress-link" > SemVer< / a > requirements for breaking changes.
< / p > < / div > < / div >
< p class = "my-4 leading-7" > This < strong class = "font-semibold" > 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 class = "my-4 leading-7" > 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 id = "render-result" class = "mt-10 mb-2 leading-7 text-xl title_3b154" > Result< a class = "link_3b154 header-anchor" aria-hidden = "true" href = "#render-result" > #< / a > < / h3 >
< p class = "my-4 leading-7" > The < code > render< / code > function returns the same queries and utilities as the < a class = "link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target = "" href = "/react-native-testing-library/docs/api/screen" > < code > screen< / code > < / a > object. We recommended using the < code > screen< / code > object as more developer-friendly way.< / p >
< p class = "my-4 leading-7" > See < a target = "_blank" rel = "noopener noreferrer" href = "https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen" class = "link_03735 link_3b154 inline-link_3b154 rspress-link" > this article< / a > from Kent C. Dodds for more details.< / p > <!-- /$ --> < / div > < div class = "rspress-doc-footer" > < footer class = "mt-8" > < div class = "xs:flex pb-5 px-2 justify-end items-center" > < / div > < div class = "flex flex-col" > < / div > < div class = "flex flex-col sm:flex-row sm:justify-around gap-4 pt-6" > < div class = "prev_e7091 flex flex-col" > < a class = "link_03735 pager-link_9b9a7 rspress-link cursor-pointer" target = "" href = "/react-native-testing-library/docs/api" > < span class = "desc_9b9a7" > Previous Page< / span > < span class = "title_9b9a7" > API reference< / span > < / a > < / div > < div class = "next_e7091 flex flex-col" > < a class = "link_03735 pager-link_9b9a7 next_9b9a7 rspress-link cursor-pointer" target = "" href = "/react-native-testing-library/docs/api/screen" > < span class = "desc_9b9a7" > Next page< / span > < span class = "title_9b9a7" > Screen object< / span > < / a > < / div > < / div > < / footer > < / div > < / div > < / div > < div class = "aside-container_edeb4" > < div > < div class = "flex flex-col" > < div class = "<lg:hidden" > < div id = "aside-container" class = "relative text-sm font-medium" > < div class = "leading-7 block text-sm font-semibold pl-3" > Contents< / div > < nav class = "mt-1" > < ul class = "relative" > < li > < a href = "#render-options" title = "Options" class = "aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style = "padding-left:0;font-weight:semibold" > < span class = "aside-link-text block" > Options< / span > < / a > < / li > < li > < a href = "#wrapper-option" title = "wrapper option" class = "aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style = "padding-left:12px;font-weight:semibold" > < span class = "aside-link-text block" > < code > wrapper< / code > option< / span > < / a > < / li > < li > < a href = "#createnodemock-option" title = "createNodeMock option" class = "aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style = "padding-left:12px;font-weight:semibold" > < span class = "aside-link-text block" > < code > createNodeMock< / code > option< / span > < / a > < / li > < li > < a href = "#unstable_validatestringsrenderedwithintext-option" title = "unstable_validateStringsRenderedWithinText option" class = "aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style = "padding-left:12px;font-weight:semibold" > < span class = "aside-link-text block" > < code > unstable_validateStringsRenderedWithinText< / code > option< / span > < / a > < / li > < li > < a href = "#render-result" title = "Result" class = "aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style = "padding-left:0;font-weight:semibold" > < span class = "aside-link-text block" > Result< / span > < / a > < / li > < / ul > < / nav > < / div > < / div > < / div > < / div > < / div > < / div > < / div > < / section > < / div > < / div > < div id = "search-container" > < / div > < / body > < / html >
