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 > `renderHook` function - 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-07-21 15:22:28 +00:00
< script defer src = "/react-native-testing-library/static/js/index.b6e4c985e3.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 = "`renderHook` function - 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-06-05 14:28:20 +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" > 14.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/misc/render-hook" class = "rp-hover-group__item__link rp-link" aria-label = "12.x" > 12.x< / a > < / li > < li class = "rp-hover-group__item" style = "padding-left:8px" data-depth = "0" > < a href = "/react-native-testing-library/13.x/docs/api/misc/render-hook" class = "rp-hover-group__item__link rp-link" aria-label = "13.x" > 13.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/misc/render-hook" 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-2h10
2026-01-16 10:02:08 +00:00
<h2 class=" rp-toc-include " id = "renderhook" > < a href = "#renderhook" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > renderHook< / code > < / h2 >
2026-06-05 14:28:20 +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-token-keyword)" > async< / span > < span style = "color:var(--shiki-token-keyword)" > function< / span > < span style = "color:var(--shiki-token-function)" > renderHook< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-function)" > Result< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-function)" > Props< / span > < span style = "color:var(--shiki-foreground)" > > (< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > hookFn< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > (props< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > Props< / span > < span style = "color:var(--shiki-foreground)" > ) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > Result< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
2026-05-29 11:28:18 +00:00
< 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)" > RenderHookOptions< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-function)" > Props< / span > < span style = "color:var(--shiki-foreground)" > > < / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
2026-06-05 14:28:20 +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)" > RenderHookResult< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-function)" > Result< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-function)" > Props< / 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 >
< p > Renders a test component that calls the provided < code > callback< / code > (and any hooks it uses) on each render. Returns a Promise that resolves to a < a href = "#renderhookresult" class = "rp-link" > < code > RenderHookResult< / code > < / a > object.< / p >
< p > < strong > This is the recommended default API< / strong > for testing hooks. It uses async < code > act< / code > internally to ensure all pending React updates are executed during rendering. This makes it compatible with async React features like < code > Suspense< / code > boundaries and the < code > use()< / code > hook.< / p >
< ul >
< li > < strong > Returns a Promise< / strong > : Should be awaited< / li >
< li > < strong > Async methods< / strong > : Both < code > rerender< / code > and < code > unmount< / code > return Promises and should be awaited< / li >
< li > < strong > Suspense support< / strong > : Compatible with < code > Suspense< / code > boundaries and < code > use()< / code > hook< / li >
< / ul >
< 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-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { renderHook< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > act } < / 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 >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { useCount } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' ../useCount' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-function)" > it< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' should increment count' < / 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)" > const< / span > < span style = "color:var(--shiki-foreground)" > { < / span > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-foreground)" > } < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > renderHook< / span > < span style = "color:var(--shiki-foreground)" > (() < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > useCount< / span > < span style = "color:var(--shiki-foreground)" > ());< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < / 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-foreground)" > .count)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 0< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > act< / span > < span style = "color:var(--shiki-foreground)" > (() < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-comment)" > // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook' s state to ensure pending useEffects are run before your next assertion.< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-token-function)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-token-function)" > .increment< / span > < span style = "color:var(--shiki-foreground)" > ();< / span > < / span >
< span class = "line" > < 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-foreground)" > .count)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 1< / 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
< 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-token-comment)" > // useCount.js< / span > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { useState } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' react' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > export< / span > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-token-function)" > useCount< / span > < span style = "color:var(--shiki-token-keyword)" > =< / 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)" > const< / span > < span style = "color:var(--shiki-foreground)" > [< / span > < span style = "color:var(--shiki-token-constant)" > count< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-constant)" > setCount< / span > < span style = "color:var(--shiki-foreground)" > ] < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-function)" > useState< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 0< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-token-function)" > increment< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-foreground)" > () < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > setCount< / span > < span style = "color:var(--shiki-foreground)" > ((previousCount) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > previousCount < / span > < span style = "color:var(--shiki-token-keyword)" > +< / span > < span style = "color:var(--shiki-token-constant)" > 1< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > return< / span > < span style = "color:var(--shiki-foreground)" > { count< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > increment };< / 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
< p > The < code > renderHook< / code > function accepts the following arguments:< / p >
2026-06-05 14:28:20 +00:00
< p > < strong > Callback< / strong > : A function called on each render of the test component. This function should call one or more hooks for testing.< / p >
< p > The callback receives < code > props< / code > from the < code > initialProps< / code > option, or from a subsequent < code > rerender< / code > call if provided.< / p >
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 > < code > options< / code > < / h3 >
2026-06-05 14:28:20 +00:00
< p > A < code > RenderHookOptions< Props> < / code > object with the following properties:< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "initial-props" > < a href = "#initial-props" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > initialProps< / code > < / h4 >
< p > The initial values to pass as < code > props< / code > to the < code > callback< / code > function of < code > renderHook< / code > . The < code > Props< / code > type is determined by the type passed to or inferred by the < code > renderHook< / code > call.< / 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-06-05 14:28:20 +00:00
< p > A React component that wraps the test component. Use this to add context providers so hooks can access them with < code > useContext< / code > .< / p >
2026-01-16 10:02:08 +00:00
< h3 class = "rp-toc-include" id = "result" > < a href = "#result" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Result< / h3 >
< 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-token-keyword)" > interface< / span > < span style = "color:var(--shiki-token-function)" > RenderHookResult< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-function)" > Result< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-function)" > Props< / span > < span style = "color:var(--shiki-foreground)" > > {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > result< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > { current< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > Result< / span > < span style = "color:var(--shiki-foreground)" > };< / span > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-function)" > rerender< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > (props< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > Props< / span > < 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-constant)" > void< / span > < span style = "color:var(--shiki-foreground)" > > ;< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > unmount< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < 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-constant)" > void< / 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-06-05 14:28:20 +00:00
< p > The < code > renderHook< / code > function returns a Promise that resolves to an object with the following properties:< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "result-1" > < a href = "#result-1" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > result< / code > < / h4 >
2026-06-05 14:28:20 +00:00
< p > The < code > current< / code > value contains whatever the < code > callback< / code > returned from < code > renderHook< / code > . The < code > Result< / code > type is determined by the type passed to or inferred by the < code > renderHook< / code > call.< / p >
< p > < strong > Note:< / strong > When using React Suspense, < code > result.current< / code > will be < code > null< / code > while the hook is suspended.< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "rerender" > < a href = "#rerender" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > rerender< / code > < / h4 >
2026-06-05 14:28:20 +00:00
< p > An async function that rerenders the test component and recalculates hooks. If < code > newProps< / code > are passed, they replace the < code > callback< / code > function' s < code > initialProps< / code > for subsequent rerenders. The < code > Props< / code > type is determined by the type passed to or inferred by the < code > renderHook< / code > call.< / p >
< p > < strong > Note< / strong > : This method returns a Promise and should be awaited.< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "unmount" > < a href = "#unmount" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > < code > unmount< / code > < / h4 >
2026-06-05 14:28:20 +00:00
< p > An async function to unmount the test component. This is commonly used to trigger cleanup effects for < code > useEffect< / code > hooks.< / p >
< p > < strong > Note< / strong > : This method returns a Promise and should be awaited.< / p >
2026-01-16 10:02:08 +00:00
< h3 class = "rp-toc-include" id = "examples" > < a href = "#examples" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > Examples< / h3 >
2026-06-05 14:28:20 +00:00
< p > Additional examples of using < code > renderHook< / code > :< / p >
2026-01-16 10:02:08 +00:00
< h4 class = "rp-toc-include" id = "with-initialprops" > < a href = "#with-initialprops" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > With < code > initialProps< / code > < / h4 >
2026-06-05 14:28:20 +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-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { useState< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > useEffect } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' react' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { renderHook< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > act } < / 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-keyword)" > const< / span > < span style = "color:var(--shiki-token-function)" > useCount< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-foreground)" > (initialCount< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-constant)" > number< / span > < span style = "color:var(--shiki-foreground)" > ) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-foreground)" > [< / span > < span style = "color:var(--shiki-token-constant)" > count< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-constant)" > setCount< / span > < span style = "color:var(--shiki-foreground)" > ] < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-function)" > useState< / span > < span style = "color:var(--shiki-foreground)" > (initialCount);< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-token-function)" > increment< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-foreground)" > () < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > setCount< / span > < span style = "color:var(--shiki-foreground)" > ((previousCount) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > previousCount < / span > < span style = "color:var(--shiki-token-keyword)" > +< / span > < span style = "color:var(--shiki-token-constant)" > 1< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > useEffect< / 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)" > setCount< / span > < span style = "color:var(--shiki-foreground)" > (initialCount);< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > }< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > [initialCount]);< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > return< / span > < span style = "color:var(--shiki-foreground)" > { count< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > increment };< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > };< / span > < / span >
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-function)" > it< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' should increment count' < / 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)" > const< / span > < span style = "color:var(--shiki-foreground)" > { < / span > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-token-constant)" > rerender< / span > < span style = "color:var(--shiki-foreground)" > } < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > renderHook< / span > < span style = "color:var(--shiki-foreground)" > ((initialCount< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-constant)" > number< / span > < span style = "color:var(--shiki-foreground)" > ) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > useCount< / span > < span style = "color:var(--shiki-foreground)" > (initialCount)< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > initialProps< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-constant)" > 1< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span >
< span class = "line" > < / 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-foreground)" > .count)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 1< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > act< / span > < span style = "color:var(--shiki-foreground)" > (() < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-token-function)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-token-function)" > .increment< / span > < span style = "color:var(--shiki-foreground)" > ();< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span >
< span class = "line" > < / 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-foreground)" > .count)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 2< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > rerender< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 5< / span > < span style = "color:var(--shiki-foreground)" > );< / span > < / span >
2026-01-16 10:02:08 +00:00
< 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .< / span > < span style = "color:var(--shiki-token-constant)" > current< / span > < span style = "color:var(--shiki-foreground)" > .count)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-constant)" > 5< / 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
< h4 class = "rp-toc-include" id = "with-wrapper" > < a href = "#with-wrapper" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > With < code > wrapper< / code > < / h4 >
2026-06-05 14:28:20 +00:00
< 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-function)" > it< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' should use context value' < / 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 >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > function< / span > < span style = "color:var(--shiki-token-function)" > Wrapper< / span > < span style = "color:var(--shiki-foreground)" > ({ children }< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > { children< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-function)" > ReactNode< / span > < span style = "color:var(--shiki-foreground)" > }) {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > return< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-constant)" > Context.Provider< / span > < span style = "color:var(--shiki-token-function)" > value< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-string-expression)" > " provided" < / span > < span style = "color:var(--shiki-foreground)" > > {children}< /< / span > < span style = "color:var(--shiki-token-constant)" > Context.Provider< / span > < span style = "color:var(--shiki-foreground)" > > ;< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > }< / span > < / span >
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-foreground)" > { < / span > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-foreground)" > } < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > renderHook< / span > < span style = "color:var(--shiki-foreground)" > (() < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > useHook< / span > < span style = "color:var(--shiki-foreground)" > ()< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > { wrapper< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > Wrapper });< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-comment)" > // ...< / 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-06-05 14:28:20 +00:00
< h4 class = "rp-toc-include" id = "with-react-suspense" > < a href = "#with-react-suspense" class = "rp-header-anchor rp-link" aria-hidden = "true" > #< / a > With React Suspense< / h4 >
< 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)" > import< / span > < span style = "color:var(--shiki-foreground)" > { renderHook< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > act } < / 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 style = "color:var(--shiki-token-keyword)" > import< / span > < span style = "color:var(--shiki-foreground)" > { Text } < / span > < span style = "color:var(--shiki-token-keyword)" > from< / span > < span style = "color:var(--shiki-token-string-expression)" > ' react-native' < / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > function< / span > < span style = "color:var(--shiki-token-function)" > useSuspendingHook< / span > < span style = "color:var(--shiki-foreground)" > (promise< / 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-constant)" > string< / span > < span style = "color:var(--shiki-foreground)" > > ) {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > return< / span > < span style = "color:var(--shiki-token-constant)" > React< / span > < span style = "color:var(--shiki-token-function)" > .use< / span > < span style = "color:var(--shiki-foreground)" > (promise);< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > }< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-function)" > it< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' handles hook with suspense' < / 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)" > let< / span > < span style = "color:var(--shiki-token-function)" > resolvePromise< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > (value< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-token-constant)" > string< / span > < span style = "color:var(--shiki-foreground)" > ) < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-constant)" > void< / span > < span style = "color:var(--shiki-foreground)" > ;< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-token-constant)" > promise< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-keyword)" > new< / span > < span style = "color:var(--shiki-token-constant)" > Promise< / span > < span style = "color:var(--shiki-foreground)" > < < / span > < span style = "color:var(--shiki-token-constant)" > string< / span > < span style = "color:var(--shiki-foreground)" > > ((resolve) < / 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-foreground)" > resolvePromise < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-foreground)" > resolve;< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > const< / span > < span style = "color:var(--shiki-foreground)" > { < / span > < span style = "color:var(--shiki-token-constant)" > result< / span > < span style = "color:var(--shiki-foreground)" > } < / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > renderHook< / span > < span style = "color:var(--shiki-foreground)" > (useSuspendingHook< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < span style = "color:var(--shiki-foreground)" > {< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > initialProps< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > promise< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-function)" > wrapper< / span > < span style = "color:var(--shiki-token-keyword)" > :< / span > < span style = "color:var(--shiki-foreground)" > ({ children }) < / 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-foreground)" > < < / span > < span style = "color:var(--shiki-token-constant)" > React.Suspense< / span > < span style = "color:var(--shiki-token-function)" > fallback< / span > < span style = "color:var(--shiki-token-keyword)" > =< / span > < span style = "color:var(--shiki-foreground)" > {< < / span > < span style = "color:var(--shiki-token-constant)" > Text< / span > < span style = "color:var(--shiki-foreground)" > > Loading...< /< / span > < span style = "color:var(--shiki-token-constant)" > Text< / span > < span style = "color:var(--shiki-foreground)" > > }> {children}< /< / span > < span style = "color:var(--shiki-token-constant)" > React.Suspense< / span > < span style = "color:var(--shiki-foreground)" > > < / span > < / span >
< span class = "line" > < span style = "color:var(--shiki-foreground)" > )< / span > < span style = "color:var(--shiki-token-punctuation)" > ,< / span > < / span >
2026-01-16 10:02:08 +00:00
< span class = "line" > < span style = "color:var(--shiki-foreground)" > });< / span > < / span >
< span class = "line" > < / span >
2026-06-05 14:28:20 +00:00
< span class = "line" > < span style = "color:var(--shiki-token-comment)" > // Initially suspended, result should not be available< / 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .current)< / span > < span style = "color:var(--shiki-token-function)" > .toBeNull< / span > < span style = "color:var(--shiki-foreground)" > ();< / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:var(--shiki-token-keyword)" > await< / span > < span style = "color:var(--shiki-token-function)" > act< / span > < span style = "color:var(--shiki-foreground)" > (() < / span > < span style = "color:var(--shiki-token-keyword)" > => < / span > < span style = "color:var(--shiki-token-function)" > resolvePromise< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' resolved' < / 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)" > result< / span > < span style = "color:var(--shiki-foreground)" > .current)< / span > < span style = "color:var(--shiki-token-function)" > .toBe< / span > < span style = "color:var(--shiki-foreground)" > (< / span > < span style = "color:var(--shiki-token-string-expression)" > ' resolved' < / 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 = "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 > <!-- /$ --> < / 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/api/misc/other" 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" > Other< / span > < / span > < / a > < a href = "/react-native-testing-library/docs/guides/how-to-query" class = "pagerLink-_WIlZJ next-axkYXz rp-link" > < span class = "textWrap-lmdyLc" > < span class = "desc-sp3vRh" > Next page< / span > < span class = "title-hrit_i" > How to Query< / 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 = "#renderhook" class = "rp-toc-item rp-link" title = "renderHook" style = "padding-left:0" data-depth = "0" > < span class = "rp-toc-item__text rp-doc" > < code > renderHook< / code > < / 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" > < code > options< / code > < / span > < / a > < a href = "#initial-props" class = "rp-toc-item rp-link" title = "initialProps" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > initialProps< / code > < / 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 = "#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 = "#result-1" class = "rp-toc-item rp-link" title = "result" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > result< / code > < / span > < / a > < a href = "#rerender" class = "rp-toc-item rp-link" title = "rerender" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > rerender< / code > < / span > < / a > < a href = "#unmount" class = "rp-toc-item rp-link" title = "unmount" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > < code > unmount< / code > < / span > < / a > < a href = "#examples" class = "rp-toc-item rp-link" title = "Examples" style = "padding-left:12px" data-depth = "1" > < span class = "rp-toc-item__text rp-doc" > Examples< / span > < / a > < a href = "#with-initialprops" class = "rp-toc-item rp-link" title = "With initialProps" style = "padding-left:24px" data-depth = "2" > < span class = "rp-toc-item__text rp-doc" > With < code > initialProps< / code > < / span > < / a > < a href = "#with-wrapper" class = "rp-toc-i
2026-01-16 10:02:08 +00:00
<div id=" __rspress_modal_container " > < / div >
2025-07-14 21:16:44 +00:00
< / body >
< / html >
