mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
507 lines
213 KiB
HTML
507 lines
213 KiB
HTML
<!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">Queries - 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="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>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="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>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="queries" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">Queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#queries">#</a></h1>
|
||
<p class="my-4 leading-7">Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents the your application's user interface when running under tests.</p>
|
||
<h2 id="accessing-queries" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Accessing queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#accessing-queries">#</a></h2>
|
||
<p class="my-4 leading-7">All queries described below are accessible in two main ways: through the <code>screen</code> object or by capturing the <code>render</code> function call result.</p>
|
||
<h3 id="using-screen-object" class="mt-10 mb-2 leading-7 text-xl title_3b154">Using <code>screen</code> object<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-screen-object">#</a></h3>
|
||
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem">
|
||
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">test</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'accessing queries using "screen" object'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">render</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</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 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)">getByRole</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">"button"</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">"Start"</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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 modern and recommended way of accessing queries is to use the <code>screen</code> object exported by the <code>@testing-library/react-native</code> package. This object will contain methods of all available queries bound to the most recently rendered UI.</p>
|
||
<h3 id="using-render-result" class="mt-10 mb-2 leading-7 text-xl title_3b154">Using <code>render</code> result<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-render-result">#</a></h3>
|
||
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" 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> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem">
|
||
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">test</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'accessing queries using "render" result'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> getByRole </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-function)">render</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">getByRole</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">"button"</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">"Start"</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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 classic way is to capture query functions, as they are returned from the <code>render</code> function call. This provides access to the same functions as in the case of the <code>screen</code> object.</p>
|
||
<h2 id="query-parts" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Query parts<a class="link_3b154 header-anchor" aria-hidden="true" href="#query-parts">#</a></h2>
|
||
<p class="my-4 leading-7">Each query is composed of two parts: variant and predicate, which are separated by the <code>by</code> word in the middle of the name.</p>
|
||
<p class="my-4 leading-7">Consider the following query:</p>
|
||
<div class="language-bash"><div class="rspress-code-content rspress-scrollbar"><code>getByRole()
|
||
</code></div></div>
|
||
<p class="my-4 leading-7">For this query, <code>getBy*</code> is the query variant, and <code>*ByRole</code> is the predicate.</p>
|
||
<h2 id="query-variant" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Query variant<a class="link_3b154 header-anchor" aria-hidden="true" href="#query-variant">#</a></h2>
|
||
<p class="my-4 leading-7">The query variants describe the expected number (and timing) of matching elements, so they differ in their return type.</p>
|
||
<table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider">
|
||
<thead>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">Variant</th>
|
||
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">Assertion</th>
|
||
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">Return type</th>
|
||
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">Is Async?</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#get-by"><code>getBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">Exactly one matching element</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>ReactTestInstance</code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">No</td>
|
||
</tr>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#get-all-by"><code>getAllBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">At least one matching element</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Array<ReactTestInstance></code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">No</td>
|
||
</tr>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#query-by"><code>queryBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">Zero or one matching element</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>ReactTestInstance | null</code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">No</td>
|
||
</tr>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#query-all-by"><code>queryAllBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">No assertion</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Array<ReactTestInstance></code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">No</td>
|
||
</tr>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#find-by"><code>findBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">Exactly one matching element</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Promise<ReactTestInstance></code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">Yes</td>
|
||
</tr>
|
||
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/queries#find-all-by"><code>findAllBy*</code></a></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">At least one matching element</td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Promise<Array<ReactTestInstance>></code></td>
|
||
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">Yes</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="my-4 leading-7">Queries work as implicit assertions on the number of matching elements and will throw an error when the assertion fails.</p>
|
||
<h3 id="get-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>getBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#get-by">#</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-function)">getByX</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestInstance</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"><code>getBy*</code> queries return the single matching element for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use <code>getAllBy</code>.</p>
|
||
<h3 id="get-all-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>getAllBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#get-all-by">#</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-function)">getAllByX</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestInstance</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"><code>getAllBy*</code> queries return an array of all matching elements for a query and throw an error if no elements match.</p>
|
||
<h3 id="query-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>queryBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#query-by">#</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-function)">queryByX</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestInstance </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-keyword)">null</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"><code>queryBy*</code> queries return the first matching node for a query, and return <code>null</code> if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use <code>queryAllBy</code> instead).</p>
|
||
<h3 id="query-all-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>queryAllBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#query-all-by">#</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-function)">queryAllByX</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token operator">...</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> ReactTestInstance</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"><code>queryAllBy*</code> queries return an array of all matching nodes for a query and return an empty array (<code>[]</code>) when no elements match.</p>
|
||
<h3 id="find-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>findBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#find-by">#</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-function)">findByX</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 class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> waitForOptions</span><span class="token operator">?</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> timeout</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> interval</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">Promise</span><span class="token operator"><</span><span>ReactTestInstance</span><span class="token operator">></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"><code>findBy*</code> queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element use <code>findAllBy*</code> queries.</p>
|
||
<h3 id="find-all-by" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>findAllBy*</code> queries<a class="link_3b154 header-anchor" aria-hidden="true" href="#find-all-by">#</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-function)">findAllByX</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 class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> waitForOptions</span><span class="token operator">?</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> timeout</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> interval</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">Promise</span><span class="token operator"><</span><span>ReactTestInstance</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></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"><code>findAllBy*</code> queries return a promise which resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms.</p>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7"><code>findBy*</code> and <code>findAllBy*</code> queries accept optional <code>waitForOptions</code> object arguments, which can contain <code>timeout</code>, <code>interval</code> and <code>onTimeout</code> properties which have the same meaning as respective options for <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/async#waitfor"><code>waitFor</code></a> function.
|
||
</p></div></div>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">In cases when your <code>findBy*</code> and <code>findAllBy*</code> queries throw when unable to find matching elements, it is helpful to pass <code>onTimeout: () => { screen.debug(); }</code> callback using the <code>waitForOptions</code> parameter.
|
||
</p></div></div>
|
||
<h2 id="query-predicates" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Query predicates<a class="link_3b154 header-anchor" aria-hidden="true" href="#query-predicates">#</a></h2>
|
||
<p class="my-4 leading-7"><em>Note: most methods like this one return a <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/docs/test-renderer.html#testinstance" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>ReactTestInstance</code></a> with following properties that you may be interested in:</em></p>
|
||
<div class="language-typescript"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-typescript" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">ReactTestInstance</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> type</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-symbol)">Function</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> props</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>propName</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 class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">any</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><span style="display:block;padding:0 1.25rem"><span> parent</span><span class="token operator">:</span><span> ReactTestInstance </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> children</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">Array</span><span class="token operator"><</span><span>ReactTestInstance </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token operator">></span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></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="by-role" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByRole</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-role">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole</p>
|
||
</blockquote>
|
||
<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-function)">getByRole</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> role</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">?</span><span class="token operator">:</span><span> TextMatch
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> disabled</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> selected</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> checked</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">'mixed'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> busy</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> expanded</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> value</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> min</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> max</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> now</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> text</span><span class="token operator">?</span><span class="token operator">:</span><span> TextMatch</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</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 a <code>ReactTestInstance</code> with matching <code>role</code> or <code>accessibilityRole</code> prop.</p>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">In order for <code>*ByRole</code> queries to match an element it needs to be considered an accessibility element:</p>
|
||
<ol class="list-decimal pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>Text</code>, <code>TextInput</code> and <code>Switch</code> host elements are these by default.</li>
|
||
<li class="[&:not(:first-child)]:mt-2"><code>View</code> host elements need an explicit <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessible" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>accessible</code></a> prop set to <code>true</code></li>
|
||
<li class="[&:not(:first-child)]:mt-2">Some React Native composite components like <code>Pressable</code> & <code>TouchableOpacity</code> render host <code>View</code> element with <code>accessible</code> prop already set.</li>
|
||
</ol>
|
||
</div></div>
|
||
<div class="language-jsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-jsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</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 class-name" style="color:var(--code-token-function)">Pressable</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">accessibilityRole</span><span class="token attr-equals" 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-string-expression)">button</span><span class="token" 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-symbol)">disabled</span><span class="token" style="color:var(--code-token-punctuation)">></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)"><</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">></span><span class="token plain-text">Hello</span><span class="token" style="color:var(--code-token-punctuation)"></</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">></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)"></</span><span class="token class-name" style="color:var(--code-token-function)">Pressable</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> element </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)">'button'</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> element2 </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)">'button'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'Hello'</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> element3 </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)">'button'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'Hello'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> disabled</span><span class="token operator">:</span><span> </span><span class="token boolean">true</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>
|
||
<h4 id="by-role-options" class="mt-8 leading-6 text-base title_3b154">Options<a class="link_3b154 header-anchor" aria-hidden="true" href="#by-role-options">#</a></h4>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>name</code>: Finds an element with given <code>role</code>/<code>accessibilityRole</code> and an accessible name (= accessability label or text content).</p>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>disabled</code>: You can filter elements by their disabled state (coming either from <code>aria-disabled</code> prop or <code>accessbilityState.disabled</code> prop). The possible values are <code>true</code> or <code>false</code>. Querying <code>disabled: false</code> will also match elements with <code>disabled: undefined</code> (see the <a target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State" class="link_03735 link_3b154 inline-link_3b154 rspress-link">wiki</a> for more details).</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitystate" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Native's accessibilityState</a> docs to learn more about the <code>disabled</code> state.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeenabled"><code>toBeEnabled()</code> / <code>toBeDisabled()</code></a> Jest matchers.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>selected</code>: You can filter elements by their selected state (coming either from <code>aria-selected</code> prop or <code>accessbilityState.selected</code> prop). The possible values are <code>true</code> or <code>false</code>. Querying <code>selected: false</code> will also match elements with <code>selected: undefined</code> (see the <a target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State" class="link_03735 link_3b154 inline-link_3b154 rspress-link">wiki</a> for more details).</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitystate" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Native's accessibilityState</a> docs to learn more about the <code>selected</code> state.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeselected"><code>toBeSelected()</code></a> Jest matcher.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>checked</code>: You can filter elements by their checked state (coming either from <code>aria-checked</code> prop or <code>accessbilityState.checked</code> prop). The possible values are <code>true</code>, <code>false</code>, or <code>"mixed"</code>.</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitystate" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Native's accessibilityState</a> docs to learn more about the <code>checked</code> state.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobechecked"><code>toBeChecked()</code> / <code>toBePartiallyChecked()</code></a> Jest matchers.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>busy</code>: You can filter elements by their busy state (coming either from <code>aria-busy</code> prop or <code>accessbilityState.busy</code> prop). The possible values are <code>true</code> or <code>false</code>. Querying <code>busy: false</code> will also match elements with <code>busy: undefined</code> (see the <a target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State" class="link_03735 link_3b154 inline-link_3b154 rspress-link">wiki</a> for more details).</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitystate" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Native's accessibilityState</a> docs to learn more about the <code>busy</code> state.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobebusy"><code>toBeBusy()</code></a> Jest matcher.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>expanded</code>: You can filter elements by their expanded state (coming either from <code>aria-expanded</code> prop or <code>accessbilityState.expanded</code> prop). The possible values are <code>true</code> or <code>false</code>.</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitystate" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Native's accessibilityState</a> docs to learn more about the <code>expanded</code> state.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeexpanded"><code>toBeExpanded()</code> / <code>toBeCollapsed()</code></a> Jest matchers.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2">
|
||
<p class="my-4 leading-7"><code>value</code>: Filter elements by their accessibility value, based on either <code>aria-valuemin</code>, <code>aria-valuemax</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code> or <code>accessibilityValue</code> props. Accessiblity value conceptually consists of numeric <code>min</code>, <code>max</code> and <code>now</code> entries, as well as string <code>text</code> entry.</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">See React Native <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilityvalue" class="link_03735 link_3b154 inline-link_3b154 rspress-link">accessibilityValue</a> docs to learn more about the accessibility value concept.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">This option can alternatively be expressed using the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tohaveaccessibilityvalue"><code>toHaveAccessibilityValue()</code></a> Jest matcher.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="by-label-text" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByLabelText</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-label-text">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText</p>
|
||
</blockquote>
|
||
<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-function)">getByLabelText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> text</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a <code>ReactTestInstance</code> with matching label:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">either by matching <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#aria-label" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>aria-label</code></a>/<a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitylabel" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>accessibilityLabel</code></a> prop</li>
|
||
<li class="[&:not(:first-child)]:mt-2">or by matching text content of view referenced by <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#aria-labelledby-android" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>aria-labelledby</code></a>/<a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android" class="link_03735 link_3b154 inline-link_3b154 rspress-link"><code>accessibilityLabelledBy</code></a> prop</li>
|
||
</ul>
|
||
<div class="language-jsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-jsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByLabelText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'my-label'</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="by-placeholder-text" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByPlaceholderText</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-placeholder-text">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText</p>
|
||
</blockquote>
|
||
<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-function)">getByPlaceholderText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> text</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</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 a <code>ReactTestInstance</code> for a <code>TextInput</code> with a matching placeholder – may be a string or regular expression.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByPlaceholderText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'username'</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="by-display-value" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByDisplayValue</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-display-value">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue</p>
|
||
</blockquote>
|
||
<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-function)">getByDisplayValue</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> value</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a <code>ReactTestInstance</code> for a <code>TextInput</code> with a matching display value – may be a string or regular expression.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByDisplayValue</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'username'</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="by-text" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByText</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-text">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText</p>
|
||
</blockquote>
|
||
<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-function)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> text</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</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 a <code>ReactTestInstance</code> with matching text – may be a string or regular expression.</p>
|
||
<p class="my-4 leading-7">This method will join <code><Text></code> siblings to find matches, similarly to <a target="_blank" rel="noopener noreferrer" href="https://reactnative.dev/docs/text#containers" class="link_03735 link_3b154 inline-link_3b154 rspress-link">how React Native handles these components</a>. This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'banana'</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="by-hint-text" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByHintText</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-hint-text">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint
|
||
getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint
|
||
getByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText</p>
|
||
</blockquote>
|
||
<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-function)">getByHintText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> hint</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a <code>ReactTestInstance</code> with matching <code>accessibilityHint</code> prop.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByHintText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Plays a song'</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>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">Please consult <a target="_blank" rel="noopener noreferrer" href="https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint" class="link_03735 link_3b154 inline-link_3b154 rspress-link">Apple guidelines on how <code>accessibilityHint</code> should be used</a>.
|
||
</p></div></div>
|
||
<h3 id="by-test-id" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByTestId</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#by-test-id">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId</p>
|
||
</blockquote>
|
||
<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-function)">getByTestId</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> testId</span><span class="token operator">:</span><span> TextMatch</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a <code>ReactTestInstance</code> with matching <code>testID</code> prop. <code>testID</code> – may be a string or a regular expression.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByTestId</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'unique-id'</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>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">In the spirit of <a target="_blank" rel="noopener noreferrer" href="https://testing-library.com/docs/guiding-principles" class="link_03735 link_3b154 inline-link_3b154 rspress-link">the guiding principles</a>, it is recommended to use this only after the other queries don't work for your use case. Using <code>testID</code> attributes do not resemble how your software is used and should be avoided if possible. However, they are particularly useful for end-to-end testing on real devices, e.g. using Detox and it's an encouraged technique to use there. Learn more from the blog post <a target="_blank" rel="noopener noreferrer" href="https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change" class="link_03735 link_3b154 inline-link_3b154 rspress-link">"Making your UI tests resilient to change"</a>.
|
||
</p></div></div>
|
||
<h3 id="by-accessibility-state" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByA11yState</code>, <code>ByAccessibilityState</code> (deprecated)<a class="link_3b154 header-anchor" aria-hidden="true" href="#by-accessibility-state">#</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 query has been marked deprecated, as is typically too general to give meaningful results. Therefore, it's better to use one of following options:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><a href="#by-role" class="link_3b154 "><code>*ByRole</code></a> query with relevant state options: <code>disabled</code>, <code>selected</code>, <code>checked</code>, <code>expanded</code> and <code>busy</code></li>
|
||
<li class="[&:not(:first-child)]:mt-2">use built-in Jest matchers to check the state of element found using some other query:<!-- -->
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">enabled state: <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeenabled"><code>toBeEnabled()</code> / <code>toBeDisabled()</code></a></li>
|
||
<li class="[&:not(:first-child)]:mt-2">checked state: <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobechecked"><code>toBeChecked()</code> / <code>toBePartiallyChecked()</code></a></li>
|
||
<li class="[&:not(:first-child)]:mt-2">selected state: <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeselected"><code>toBeSelected()</code></a></li>
|
||
<li class="[&:not(:first-child)]:mt-2">expanded state: <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobeexpanded"><code>toBeExpanded()</code> / <code>toBeCollapsed()</code></a></li>
|
||
<li class="[&:not(:first-child)]:mt-2">busy state: <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tobebusy"><code>toBeBusy()</code></a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div></div>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByA11yState, getAllByA11yState, queryByA11yState, queryAllByA11yState, findByA11yState, findAllByA11yState
|
||
getByAccessibilityState, getAllByAccessibilityState, queryByAccessibilityState, queryAllByAccessibilityState, findByAccessibilityState, findAllByAccessibilityState</p>
|
||
</blockquote>
|
||
<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-function)">getByA11yState</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> state</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> disabled</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> selected</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> checked</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">'mixed'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> busy</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> expanded</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a <code>ReactTestInstance</code> with matching <code>accessibilityState</code> prop or ARIA state props: <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-checked</code>, <code>aria-busy</code>, and <code>aria-expanded</code>.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">/></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> element </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)">getByA11yState</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> disabled</span><span class="token operator">:</span><span> </span><span class="token boolean">true</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>
|
||
<div class="rspress-directive note"><div class="rspress-directive-title">NOTE</div><div class="rspress-directive-content">
|
||
<h4 id="default-state-for-disabled-selected-and-busy-keys" class="mt-8 leading-6 text-base title_3b154">Default state for: <code>disabled</code>, <code>selected</code>, and <code>busy</code> keys<a class="link_3b154 header-anchor" aria-hidden="true" href="#default-state-for-disabled-selected-and-busy-keys">#</a></h4>
|
||
<p class="my-4 leading-7">Passing <code>false</code> matcher value will match both elements with explicit <code>false</code> state value and without explicit state value.</p>
|
||
<p class="my-4 leading-7">For instance, <code>getByA11yState({ disabled: false })</code> will match elements with following props:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>accessibilityState={{ disabled: false, ... }}</code></li>
|
||
<li class="[&:not(:first-child)]:mt-2">no <code>disabled</code> key under <code>accessibilityState</code> prop, e.g. <code>accessibilityState={{}}</code></li>
|
||
<li class="[&:not(:first-child)]:mt-2">no <code>accessibilityState</code> prop at all</li>
|
||
</ul>
|
||
<h4 id="default-state-for-checked-and-expanded-keys" class="mt-8 leading-6 text-base title_3b154">Default state for: <code>checked</code> and <code>expanded</code> keys<a class="link_3b154 header-anchor" aria-hidden="true" href="#default-state-for-checked-and-expanded-keys">#</a></h4>
|
||
<p class="my-4 leading-7">Passing <code>false</code> matcher value will only match elements with explicit <code>false</code> state value.</p>
|
||
<p class="my-4 leading-7">For instance, <code>getByA11yState({ checked: false })</code> will only match elements with:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>accessibilityState={{ checked: false, ... }}</code></li>
|
||
</ul>
|
||
<p class="my-4 leading-7">but will not match elements with following props:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2">no <code>checked</code> key under <code>accessibilityState</code> prop, e.g. <code>accessibilityState={{}}</code></li>
|
||
<li class="[&:not(:first-child)]:mt-2">no <code>accessibilityState</code> prop at all</li>
|
||
</ul>
|
||
<p class="my-4 leading-7">The difference in handling default values is made to reflect observed accessibility behaviour on iOS and Android platforms.
|
||
</p></div></div>
|
||
<h3 id="by-accessibility-value" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>*ByA11yValue</code>, <code>*ByAccessibilityValue</code> (deprecated)<a class="link_3b154 header-anchor" aria-hidden="true" href="#by-accessibility-value">#</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 query has been marked deprecated, as is typically too general to give meaningful results. Therefore, it's better to use one of following options:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/jest-matchers#tohaveaccessibilityvalue"><code>toHaveAccessibilityValue()</code></a> Jest matcher to check the state of element found using some other query</li>
|
||
<li class="[&:not(:first-child)]:mt-2"><a href="#by-role" class="link_3b154 "><code>*ByRole</code></a> query with <code>value</code> option</li>
|
||
</ul>
|
||
</div></div>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">getByA11yValue, getAllByA11yValue, queryByA11yValue, queryAllByA11yValue, findByA11yValue, findAllByA11yValue
|
||
getByAccessibilityValue, getAllByAccessibilityValue, queryByAccessibilityValue, queryAllByAccessibilityValue, findByAccessibilityValue, findAllByAccessibilityValue</p>
|
||
</blockquote>
|
||
<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-function)">getByA11yValue</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> value</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> min</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> max</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> now</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> text</span><span class="token operator">?</span><span class="token operator">:</span><span> TextMatch</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> includeHiddenElements</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> 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 a host element with matching accessibility value based on <code>aria-valuemin</code>, <code>aria-valuemax</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code> & <code>accessibilityValue</code> props. Only value entires provided to the query will be used to match elements. Element might have additional accessibility value entries and still be matched.</p>
|
||
<p class="my-4 leading-7">When querying by <code>text</code> entry a string or regex might be used.</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-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> render</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> screen </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@testing-library/react-native'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</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)"><</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)">accessibilityValue</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)"> min</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 number" style="color:var(--code-token-function)">0</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)"> max</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 number" style="color:var(--code-token-function)">100</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)"> now</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 number" style="color:var(--code-token-function)">25</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)"> text</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)">'25%'</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)">/></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> element </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)">getByA11yValue</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> now</span><span class="token operator">:</span><span> </span><span class="token number">25</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> element2 </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)">getByA11yValue</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> text</span><span class="token operator">:</span><span> </span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">25</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</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="common-options" class="mt-10 mb-2 leading-7 text-xl title_3b154">Common options<a class="link_3b154 header-anchor" aria-hidden="true" href="#common-options">#</a></h3>
|
||
<p class="my-4 leading-7">Usually query first argument can be a <strong class="font-semibold">string</strong> or a <strong class="font-semibold">regex</strong>. All queries take at least the <a href="#hidden-option" class="link_3b154 "><code>hidden</code></a> option as an optionnal second argument and some queries accept more options which change string matching behaviour. See <a href="#textmatch" class="link_3b154 ">TextMatch</a> for more info.</p>
|
||
<h4 id="includehiddenelements-option" class="mt-8 leading-6 text-base title_3b154"><code>includeHiddenElements</code> option<a class="link_3b154 header-anchor" aria-hidden="true" href="#includehiddenelements-option">#</a></h4>
|
||
<p class="my-4 leading-7">All queries have the <code>includeHiddenElements</code> option which affects whether <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/accessibility#ishiddenfromaccessibility">elements hidden from accessibility</a> are matched by the query. By default queries will not match hidden elements, because the users of the app would not be able to see such elements.</p>
|
||
<p class="my-4 leading-7">You can configure the default value with the <a class="link_03735 link_3b154 inline-link_3b154 rspress-link cursor-pointer" target="" href="/react-native-testing-library/docs/api/misc/config#configure"><code>configure</code> function</a>.</p>
|
||
<p class="my-4 leading-7">This option is also available as <code>hidden</code> alias for compatibility with <a target="_blank" rel="noopener noreferrer" href="https://testing-library.com/docs/queries/byrole#hidden" class="link_03735 link_3b154 inline-link_3b154 rspress-link">React Testing Library</a>.</p>
|
||
<p class="my-4 leading-7"><strong class="font-semibold">Examples</strong></p>
|
||
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" 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)"><</span><span class="token class-name" style="color:var(--code-token-function)">Text</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)"> display</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)">'none'</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-punctuation)">></span><span class="token plain-text">Hidden from accessibility</span><span class="token" style="color:var(--code-token-punctuation)"></</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem">
|
||
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// Exclude hidden elements</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">expect</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
|
||
</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)">queryByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Hidden from accessibility'</span><span class="token" style="color:var(--code-token-punctuation)">,</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> includeHiddenElements</span><span class="token operator">:</span><span> </span><span class="token boolean">false</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>
|
||
</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>not</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">toBeOnTheScreen</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem">
|
||
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// Include hidden elements</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">expect</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>screen</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Hidden from accessibility'</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">toBeOnTheScreen</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">expect</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Hidden from accessibility'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> includeHiddenElements</span><span class="token operator">:</span><span> </span><span class="token boolean">true</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><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">toBeOnTheScreen</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></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>
|
||
<h2 id="textmatch-type" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">TextMatch type<a class="link_3b154 header-anchor" aria-hidden="true" href="#textmatch-type">#</a></h2>
|
||
<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)">type</span><span> </span><span class="token class-name">TextMatch</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span> </span><span class="token operator">|</span><span> RegExp</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">Most of the query APIs take a <code>TextMatch</code> as an argument, which means the argument can be either a <em>string</em> or <em>regex</em>.</p>
|
||
<h3 id="examples" class="mt-10 mb-2 leading-7 text-xl title_3b154">Examples<a class="link_3b154 header-anchor" aria-hidden="true" href="#examples">#</a></h3>
|
||
<p class="my-4 leading-7">Given the following render:</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)"><</span><span class="token class-name" style="color:var(--code-token-function)">Text</span><span class="token" style="color:var(--code-token-punctuation)">></span><span class="token plain-text">Hello World</span><span class="token" style="color:var(--code-token-punctuation)"></</span><span class="token class-name" style="color:var(--code-token-function)">Text</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">Will <strong class="font-semibold">find a match</strong>:</p>
|
||
<div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// Matching a string:</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Hello World'</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-comment)">// full string match</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'llo Worl'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">exact</span><span class="token operator">:</span><span> </span><span class="token boolean">false</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> </span><span class="token" style="color:var(--code-token-comment)">// substring match</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'hello world'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">exact</span><span class="token operator">:</span><span> </span><span class="token boolean">false</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> </span><span class="token" style="color:var(--code-token-comment)">// ignore case-sensitivity</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-comment)">// Matching a regex:</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">World</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</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-comment)">// substring match</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">world</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-flags" style="color:var(--code-token-keyword)">i</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-comment)">// substring match, ignore case</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">^hello world$</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-flags" style="color:var(--code-token-keyword)">i</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-comment)">// full string match, ignore case-sensitivity</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">Hello W?oRlD</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-flags" style="color:var(--code-token-keyword)">i</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-comment)">// advanced regex</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">Will <strong class="font-semibold">NOT find a match</strong></p>
|
||
<div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// substring does not match</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'llo Worl'</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-comment)">// full string does not match</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">'Goodbye World'</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 style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// case-sensitive regex with different case</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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">hello world</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</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="text-match-options" class="mt-10 mb-2 leading-7 text-xl title_3b154">Options<a class="link_3b154 header-anchor" aria-hidden="true" href="#text-match-options">#</a></h3>
|
||
<h4 id="precision" class="mt-8 leading-6 text-base title_3b154">Precision<a class="link_3b154 header-anchor" aria-hidden="true" href="#precision">#</a></h4>
|
||
<div class="language-typescript"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-typescript" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">TextMatchOptions</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> exact</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span> normalizer</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>text</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> </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>
|
||
</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">Queries that take a <code>TextMatch</code> also accept an object as the second argument that can contain options that affect the precision of string matching:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>exact</code>: Defaults to <code>true</code>; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.<!-- -->
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>exact</code> has no effect on regex argument.</li>
|
||
<li class="[&:not(:first-child)]:mt-2">In most cases using a <code>regex</code> instead of a string gives you more control over fuzzy matching and should be preferred over <code>{ exact: false }</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="[&:not(:first-child)]:mt-2"><code>normalizer</code>: An optional function which overrides normalization behavior. See <a href="#normalization" class="link_3b154 ">Normalization</a>.</li>
|
||
</ul>
|
||
<p class="my-4 leading-7"><code>exact</code> option defaults to <code>true</code> but if you want to search for a text slice or make text matching case-insensitive you can override it. That being said we advise you to use regex in more complex scenarios.</p>
|
||
<h4 id="normalization" class="mt-8 leading-6 text-base title_3b154">Normalization<a class="link_3b154 header-anchor" aria-hidden="true" href="#normalization">#</a></h4>
|
||
<p class="my-4 leading-7">Before running any matching logic against text, it is automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space.</p>
|
||
<p class="my-4 leading-7">If you want to prevent that normalization, or provide alternative normalization (e.g. to remove Unicode control characters), you can provide a <code>normalizer</code> function in the options object. This function will be given a string and is expected to return a normalized version of that string.</p>
|
||
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">Specifying a value for <code>normalizer</code> replaces the built-in normalization, but you can call <code>getDefaultNormalizer</code> to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer.
|
||
</p></div></div>
|
||
<p class="my-4 leading-7"><code>getDefaultNormalizer</code> take options object which allows the selection of behaviour:</p>
|
||
<ul class="list-disc pl-5 my-4 leading-7">
|
||
<li class="[&:not(:first-child)]:mt-2"><code>trim</code>: Defaults to <code>true</code>. Trims leading and trailing whitespace.</li>
|
||
<li class="[&:not(:first-child)]:mt-2"><code>collapseWhitespace</code>: Defaults to <code>true</code>. Collapses inner whitespace (newlines, tabs repeated spaces) into a single space.</li>
|
||
</ul>
|
||
<h5 id="normalization-examples" class="title_3b154">Normalization Examples<a class="link_3b154 header-anchor" aria-hidden="true" href="#normalization-examples">#</a></h5>
|
||
<p class="my-4 leading-7">To perform a match against text without trimming:</p>
|
||
<div class="language-typescript"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-typescript" 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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>node</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">'text'</span><span class="token" style="color:var(--code-token-punctuation)">,</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> normalizer</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-function)">getDefaultNormalizer</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> trim</span><span class="token operator">:</span><span> </span><span class="token boolean">false</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>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
||
<p class="my-4 leading-7">To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:</p>
|
||
<div class="language-typescript"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-typescript" 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)">getByText</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>node</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">'text'</span><span class="token" style="color:var(--code-token-punctuation)">,</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 function-variable" style="color:var(--code-token-function)">normalizer</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>str</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-function)">getDefaultNormalizer</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> trim</span><span class="token operator">:</span><span> </span><span class="token boolean">false</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>str</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">replace</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">[\u200E-\u200F]*</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-flags" style="color:var(--code-token-keyword)">g</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">''</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
||
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
||
<h2 id="legacy-unit-testing-helpers" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Legacy unit testing helpers<a class="link_3b154 header-anchor" aria-hidden="true" href="#legacy-unit-testing-helpers">#</a></h2>
|
||
<p class="my-4 leading-7"><code>render</code> from <code>@testing-library/react-native</code> exposes additional queries that <strong class="font-semibold">should not be used in integration or component testing</strong>, but some users (like component library creators) interested in unit testing some components may find helpful.</p>
|
||
<p class="my-4 leading-7">The interface is the same as for other queries, but we won't provide full names so that they're harder to find by search engines.</p>
|
||
<h3 id="unsafe_bytype" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>UNSAFE_ByType</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#unsafe_bytype">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType</p>
|
||
</blockquote>
|
||
<p class="my-4 leading-7">Returns a <code>ReactTestInstance</code> with matching a React component type.</p>
|
||
<div class="rspress-directive caution"><div class="rspress-directive-title">CAUTION</div><div class="rspress-directive-content"><p class="my-4 leading-7">This query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.</p></div></div>
|
||
<h3 id="unsafe_byprops" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>UNSAFE_ByProps</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#unsafe_byprops">#</a></h3>
|
||
<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
|
||
<p class="my-4 leading-7">UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps</p>
|
||
</blockquote>
|
||
<p class="my-4 leading-7">Returns a <code>ReactTestInstance</code> with matching props object.</p>
|
||
<div class="rspress-directive caution"><div class="rspress-directive-title">CAUTION</div><div class="rspress-directive-content"><p class="my-4 leading-7">This query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.</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/screen"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Screen object</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/jest-matchers"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Jest matchers</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="<lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">Contents</div><nav class="mt-1"><ul class="relative"><li><a href="#accessing-queries" title="Accessing 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">Accessing queries</span></a></li><li><a href="#using-screen-object" title="Using screen object" 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">Using <code>screen</code> object</span></a></li><li><a href="#using-render-result" title="Using render result" 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">Using <code>render</code> result</span></a></li><li><a href="#query-parts" title="Query parts" 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">Query parts</span></a></li><li><a href="#query-variant" title="Query variant" 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">Query variant</span></a></li><li><a href="#get-by" title="getBy* queries" 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>getBy*</code> queries</span></a></li><li><a href="#get-all-by" title="getAllBy* queries" 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>getAllBy*</code> queries</span></a></li><li><a href="#query-by" title="queryBy* queries" 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>queryBy*</code> queries</span></a></li><li><a href="#query-all-by" title="queryAllBy* queries" 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>queryAllBy*</code> queries</span></a></li><li><a href="#find-by" title="findBy* queries" 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>findBy*</code> queries</span></a></li><li><a href="#find-all-by" title="findAllBy* queries" 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>findAllBy*</code> queries</span></a></li><li><a href="#query-predicates" title="Query predicates" 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">Query predicates</span></a></li><li><a href="#by-role" title="*ByRole" 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>*ByRole</code></span></a></li><li><a href="#by-role-options" title="Options" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block">Options</span></a></li><li><a href="#by-label-text" title="*ByLabelText" 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>*ByLabelText</code></span></a></li><li><a href="#by-placeholder-text" title="*ByPlaceholderText" 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>*ByPlaceholderText</code></span></a></li><li><a href="#by-display-value" title="*ByDisplayValue" 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>*ByDisplayValue</code></span></a></li><li><a href="#by-text" title="*ByText" 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>*ByText</code></span></a></li><li><a href="#by-hint-text" title="*ByHintText" 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>*ByHintText</code></span></a></li><li><a href="#by-test-id" title="*ByTestId" 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>*ByTestId</code></span></a></li><li><a href="#by-accessibility-state" title="*ByA11yState, ByAccessibilityState (deprecated)" 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>*ByA11yState</code>, <code>ByAccessibilityState</code> (deprecated)</span></a></li><li><a href="#default-state-for-disabled-selected-and-busy-keys" title="Default state for: disabled, selected, and busy keys" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block">Default state for: <code>disabled</code>, <code>selected</code>, and <code>busy</code> keys</span></a></li><li><a href="#default-state-for-checked-and-expanded-keys" title="Default state for: checked and expanded keys" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block">Default state for: <code>checked</code> and <code>expanded</code> keys</span></a></li><li><a href="#by-accessibility-value" title="ByA11yValue, ByAccessibilityValue (deprecated)" 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><em>ByA11yValue</em></code>, <code>ByAccessibilityValue</code> (deprecated)</span></a></li><li><a href="#common-options" title="Common options" 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">Common options</span></a></li><li><a href="#includehiddenelements-option" title="includeHiddenElements option" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block"><code>includeHiddenElements</code> option</span></a></li><li><a href="#textmatch-type" title="TextMatch type" 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">TextMatch type</span></a></li><li><a href="#examples" title="Examples" 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">Examples</span></a></li><li><a href="#text-match-options" title="Options" 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">Options</span></a></li><li><a href="#precision" title="Precision" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block">Precision</span></a></li><li><a href="#normalization" title="Normalization" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="padding-left:24px;font-weight:semibold"><span class="aside-link-text block">Normalization</span></a></li><li><a href="#legacy-unit-testing-helpers" title="Legacy unit testing helpers" 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">Legacy unit testing helpers</span></a></li><li><a href="#unsafe_bytype" title="UNSAFE_ByType" 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>UNSAFE_ByType</code></span></a></li><li><a href="#unsafe_byprops" title="UNSAFE_ByProps" 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>UNSAFE_ByProps</code></span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html> |