skills/callstack__react-native-testing-library
1
0
Fork 0
mirror of https://github.com/callstack/react-native-testing-library.git synced 2026-09-18 23:09:04 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
dfd0fbf96fdf7ee3b3b19683b7b84cd37bb6739f
callstack__react-native-tes…/docs/api/screen.html
T
github-actions[bot] dfd0fbf96f deploy: 239e046798
2024-08-25 15:16:23 +00:00

71 lines
76 KiB
HTML
Raw Blame History

<!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">`screen` object - 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">Examples</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/callstack/react-native-testing-library" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><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></div><div class="navMenuItem_457e8 w-full"><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></div><div class="navMenuItem_457e8 w-full"><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">Examples</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/callstack/react-native-testing-library" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">Contents</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="sidebarContainer_71eca"><div class="navTitleMask_71eca"><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><div class="mt-1 sidebarContent_71eca"><div class="rspress-scrollbar" style="max-height:calc(100vh - var(--rp-nav-height) - 8px);overflow:auto"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center">Getting started</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/start/intro"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Introduction</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/start/quick-start"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Quick Start</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center">API reference</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/render"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Render function</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/screen"><div class="menuItemActive_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Screen object</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Queries</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Jest matchers</span></div></a></div><div><section class="mt-0.5 block" style="margin-left:18px"><div class="flex justify-between items-center menuItem_71eca" style="cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex"><span class="flex-center">Triggering events</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:0"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/events/user-event"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>User Event</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/events/fire-event"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Fire Event</span></div></a></div></div></div></section></div><div><section class="mt-0.5 block" style="margin-left:18px"><div class="flex justify-between items-center menuItem_71eca" style="cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex"><span class="flex-center">Miscellaneous</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:0"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/render-hook"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Render Hook function</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/async"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Async utilities</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/config"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Configuration</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/accessibility"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Accessibility</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/other"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Other helpers</span></div></a></div></div></div></section></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center">Guides</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/guides/how-to-query"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>How should I query?</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/guides/troubleshooting"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Troubleshooting</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/guides/faq"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>FAQ</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/guides/community-resources"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Community resources</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center">Advanced Guides</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/advanced/testing-env"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Testing environment</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/advanced/understanding-act"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Understanding <code>act</code> function</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center">Migration Guides</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(0deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden;max-height:0"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:0;margin-left:12px"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/v12"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to 12.x</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/jest-matchers"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to built-in Jest matchers</span></div></a></div><div><section class="mt-0.5 block" style="margin-left:18px"><div class="flex justify-between items-center menuItem_71eca" style="cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex"><span class="flex-center">Previous versions</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(0deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden;max-height:0"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:0;margin-left:0"><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/previous/v11"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to 11.x</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/previous/v9"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to 9.x</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/previous/v7"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to 7.x</span></div></a></div><div><a class="link_03735 menuLink_71eca rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/migration/previous/v2"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Migration to 2.x</span></div></a></div></div></div></section></div></div></div></section></nav></div></div></div></aside><div class="content_edeb4 rspress-doc-container flex flex-shrink-0 mx-auto"><div class="w-full flex-1"><div><div class="rspress-doc"><!--$--><h1 id="screen-object" class="text-3xl mb-10 leading-10 tracking-tight title_3b154"><code>screen</code> object<a class="link_3b154 header-anchor" aria-hidden="true" href="#screen-object">#</a></h1>
<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 class="token" style="color:var(--code-token-keyword)">let</span><span> screen</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 operator">...</span><span>queries</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)">rerender</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 operator">&lt;</span><span class="token" style="color:var(--code-token-symbol)">unknown</span><span class="token operator">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</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)">unmount</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</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)">debug</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>options</span><span class="token operator">?</span><span class="token operator">:</span><span> DebugOptions</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</span><span>
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">toJSON</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestRendererJSON </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-keyword)">null</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
</span></span><span style="display:block;padding:0 1.25rem"><span> root</span><span class="token operator">:</span><span> ReactTestInstance</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
</span></span><span style="display:block;padding:0 1.25rem"><span> UNSAFE_root</span><span class="token operator">:</span><span> ReactTestInstance</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></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>screen</code> object offers a recommended way to access queries and utilities for the currently rendered UI.</p>
<p class="my-4 leading-7">This object is assigned after the <code>render</code> call and cleared after each test by calling <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/other#cleanup"><code>cleanup</code></a>. If no <code>render</code> call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access.</p>
<h3 id="queries" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>...queries</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#queries">#</a></h3>
<p class="my-4 leading-7">The most important feature of <code>screen</code> is providing a set of helpful queries that allow you to find certain elements in the view hierarchy.</p>
<p class="my-4 leading-7">See <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries">Queries</a> for a complete list.</p>
<h4 id="example" class="mt-8 leading-6 text-base title_3b154">Example<a class="link_3b154 header-anchor" aria-hidden="true" href="#example">#</a></h4>
<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)">&#x27;@testing-library/react-native&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
</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)">render</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">MyComponent</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">/&gt;</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-keyword)">const</span><span> buttonStart </span><span class="token operator">=</span><span> screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">getByRole</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;button&#x27;</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)">&#x27;start&#x27;</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></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>
<h3 id="rerender" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>rerender</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#rerender">#</a></h3>
<p class="my-4 leading-7"><em>Also available under <code>update</code> alias</em></p>
<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 class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">rerender</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 operator">&lt;</span><span class="token" style="color:var(--code-token-symbol)">unknown</span><span class="token operator">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</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">Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and <code>key</code>) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events.</p>
<h3 id="unmount" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>unmount</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#unmount">#</a></h3>
<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 class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">unmount</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</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">Unmount the in-memory tree, triggering the appropriate lifecycle events.</p>
<div class="rspress-directive note"><div class="rspress-directive-title">NOTE</div><div class="rspress-directive-content"><p class="my-4 leading-7">Usually you should not need to call <code>unmount</code> as it is done automatically if your test runner supports <code>afterEach</code> hook (like Jest, mocha, Jasmine).
</p></div></div>
<h3 id="debug" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>debug</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#debug">#</a></h3>
<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 class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">debug</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> message</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> mapProps</span><span class="token operator">?</span><span class="token operator">:</span><span> MapPropsFunction </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</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">Pretty prints deeply rendered component passed to <code>render</code>.</p>
<h4 id="debug-message-option" class="mt-8 leading-6 text-base title_3b154"><code>message</code> option<a class="link_3b154 header-anchor" aria-hidden="true" href="#debug-message-option">#</a></h4>
<p class="my-4 leading-7">You can provide a message that will be printed on top.</p>
<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-function)">render</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">Component</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">/&gt;</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>screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">debug</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> message</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;optional message&#x27;</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></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">logs optional message and colored JSX:</p>
<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>optional message
</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-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">View</span><span class="token" style="color:var(--code-token-function)">
</span></span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">onPress</span><span class="token script language-javascript script-punctuation" style="color:var(--code-token-function)">=</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">[</span><span class="token script language-javascript" style="color:var(--code-token-symbol)">Function</span><span class="token script language-javascript" style="color:var(--code-token-function)"> bound fn</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">]</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-function)">
</span></span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-function)"></span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
</span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">Press me</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
</span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"></span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token class-name" style="color:var(--code-token-function)">View</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</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>
<h4 id="debug-map-props-option" class="mt-8 leading-6 text-base title_3b154"><code>mapProps</code> option<a class="link_3b154 header-anchor" aria-hidden="true" href="#debug-map-props-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 class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">debug</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 function-variable" style="color:var(--code-token-function)">mapProps</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>props</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</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> </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>
<p class="my-4 leading-7">You can use the <code>mapProps</code> option to transform the props that will be printed :</p>
<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-function)">render</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">View</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">style</span><span class="token script language-javascript script-punctuation" style="color:var(--code-token-function)">=</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-function)"> backgroundColor</span><span class="token script language-javascript operator" style="color:var(--code-token-function)">:</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-string)">&#x27;red&#x27;</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">/&gt;</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>screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">debug</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 function-variable" style="color:var(--code-token-function)">mapProps</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> style</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token operator">...</span><span>props </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">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> props </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" 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>
<p class="my-4 leading-7">This will log the rendered JSX without the <code>style</code> props.</p>
<p class="my-4 leading-7">The <code>children</code> prop cannot be filtered out so the following will print all rendered components with all props but <code>children</code> filtered out.</p>
<p class="my-4 leading-7">This option can be used to target specific props when debugging a query (for instance, keeping only the <code>children</code> prop when debugging a <code>getByText</code> query).</p>
<p class="my-4 leading-7">You can also transform prop values so that they are more readable (e.g., flatten styles).</p>
<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 class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> StyleSheet </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)">&#x27;react-native&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
</span></span><span style="display:block;padding:0 1.25rem">
</span><span style="display:block;padding:0 1.25rem"><span>screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">debug</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> mapProps </span><span class="token operator">:</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> style</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token operator">...</span><span>props </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 class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> style </span><span class="token operator">:</span><span> StyleSheet</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">flatten</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>style</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>props </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" 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>
<p class="my-4 leading-7">Or remove props that have little value when debugging tests, e.g. path prop for svgs</p>
<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>screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">debug</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 function-variable" style="color:var(--code-token-function)">mapProps</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> path</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token operator">...</span><span>props </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">=&gt;</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>props </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" 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>
<h3 id="tojson" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>toJSON</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#tojson">#</a></h3>
<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 class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">toJSON</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestRendererJSON </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-keyword)">null</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">Get the rendered component JSON representation, e.g. for snapshot testing.</p>
<h3 id="root" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>root</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#root">#</a></h3>
<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 class="token" style="color:var(--code-token-keyword)">const</span><span> root</span><span class="token operator">:</span><span> ReactTestInstance</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">Returns the rendered root <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/advanced/testing-env#host-and-composite-components">host element</a>.</p>
<p class="my-4 leading-7">This API is primarily useful for component tests, as it allows you to access root host view without using <code>*ByTestId</code> queries or similar methods.</p>
<h3 id="unsafe_root" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>UNSAFE_root</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#unsafe_root">#</a></h3>
<div class="rspress-directive caution"><div class="rspress-directive-title">CAUTION</div><div class="rspress-directive-content"><p class="my-4 leading-7">This API typically will return a composite view, which goes against recommended testing practices. This API is primarily available for legacy test suites that rely on such testing.</p></div></div>
<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 class="token" style="color:var(--code-token-keyword)">const</span><span> UNSAFE_root</span><span class="token operator">:</span><span> ReactTestInstance</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">Returns the rendered <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/advanced/testing-env#host-and-composite-components">composite root element</a>.</p>
<div class="rspress-directive note"><div class="rspress-directive-title">NOTE</div><div class="rspress-directive-content"><p class="my-4 leading-7">This API has been previously named <code>container</code> for compatibility with <a target="_blank" rel="noopener noreferrer" href="https://testing-library.com/docs/react-testing-library/other#container-1" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Testing Library</a>. However, despite the same name, the actual behavior has been significantly different; hence, we decided to change the name to <code>UNSAFE_root</code>.
</p></div></div><!--/$--></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/render"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Render function</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/queries"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Queries</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;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="#queries" title="...queries" 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"><code>...queries</code></span></a></li><li><a href="#example" title="Example" 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">Example</span></a></li><li><a href="#rerender" title="rerender" 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"><code>rerender</code></span></a></li><li><a href="#unmount" title="unmount" 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"><code>unmount</code></span></a></li><li><a href="#debug" title="debug" 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"><code>debug</code></span></a></li><li><a href="#debug-message-option" title="message 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>message</code> option</span></a></li><li><a href="#debug-map-props-option" title="mapProps 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>mapProps</code> option</span></a></li><li><a href="#tojson" title="toJSON" 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"><code>toJSON</code></span></a></li><li><a href="#root" title="root" 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"><code>root</code></span></a></li><li><a href="#unsafe_root" title="UNSAFE_root" 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"><code>UNSAFE_root</code></span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>
Reference in New Issue View Git Blame Copy Permalink