mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
84 lines
59 KiB
HTML
84 lines
59 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="generator" content="Docusaurus v2.0.0-alpha.54">
|
||
|
||
|
||
<title data-react-helmet="true">Queries | React Native Testing Library</title>
|
||
|
||
<meta data-react-helmet="true" property="og:image" content="img/owl.png"><meta data-react-helmet="true" property="twitter:image" content="img/owl.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Testing Library"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Queries | React Native Testing Library"><meta data-react-helmet="true" name="description" content="## Variants"><meta data-react-helmet="true" property="og:description" content="## Variants"><meta data-react-helmet="true" property="og:url" content="https://callstack.github.io/react-native-testing-library/docs/api-queries">
|
||
|
||
<link data-react-helmet="true" rel="shortcut icon" href="/react-native-testing-library/img/owl.png">
|
||
|
||
|
||
<link rel="stylesheet" href="/react-native-testing-library/styles.0b2023b2.css">
|
||
|
||
|
||
<link rel="preload" href="/react-native-testing-library/styles.ea9abc4b.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/runtime~main.a6f715a7.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/main.d84b0ece.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/1.4fea9f82.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/2.34b7fab5.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/17.38dfff7b.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/e91cf13d.84e5f68d.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/17896441.324cc979.js" as="script">
|
||
|
||
<link rel="preload" href="/react-native-testing-library/7ad239b9.3010f716.js" as="script">
|
||
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=window.matchMedia("(prefers-color-scheme: dark)"),n=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();null!==n?t(n):e.matches&&t("dark")}()</script>
|
||
<div id="__docusaurus">
|
||
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/react-native-testing-library/"><img class="navbar__logo" src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library"><strong class="navbar__title">React Native Testing Library</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/react-native-testing-library/docs/getting-started">Docs</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_keGJ moon_1gwN"></span></div><div class="react-toggle-track-x"><span class="toggle_keGJ sun_3CPA"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/react-native-testing-library/"><img class="navbar__logo" src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library"><strong class="navbar__title">React Native Testing Library</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" position="right" href="/react-native-testing-library/docs/getting-started">Docs</a></li><li class="menu__list-item"><a target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library" class="menu__link" position="right">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><div class="docSidebarContainer_1cYp"><div class="sidebar_1kLs"><div class="menu menu--responsive menu_w2sC"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_2vk4" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="#!">Introduction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/getting-started">Getting Started</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">API Reference</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/api">API</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" tabindex="0" href="/react-native-testing-library/docs/api-queries">Queries</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v7">Migration to 7.0</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v2">Migration to 2.0</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/react-navigation">React Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/redux-integration">Redux Integration</a></li></ul></li></ul></div></div></div><main class="docMainContainer_FFX1"><div class="container padding-vert--lg docItemWrapper_1cc7"><div class="row"><div class="col docItemCol_2GOA"><div class="docItemContainer_2cwg"><article><header><h1 class="docTitle_1vWb">Queries</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="variants"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#variants" title="Direct link to heading">#</a>Variants</h2><blockquote><p><code>getBy</code> queries are shown by default in the <a href="#queries">query documentation</a>
|
||
below.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="getby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#getby" title="Direct link to heading">#</a>getBy</h3><p><code>getBy*</code> queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found (use <code>getAllBy</code> instead).</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="getallby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#getallby" title="Direct link to heading">#</a>getAllBy</h3><p><code>getAllBy*</code> queries return an array of all matching nodes for a query, and throw an error if no elements match.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="queryby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#queryby" title="Direct link to heading">#</a>queryBy</h3><p><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><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="queryallby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#queryallby" title="Direct link to heading">#</a>queryAllBy</h3><p><code>queryAllBy*</code> queries return an array of all matching nodes for a query, and return an empty array (<code>[]</code>) if no elements match.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="findby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#findby" title="Direct link to heading">#</a>findBy</h3><p><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 4500ms. If you need to find more than one element, then use <code>findAllBy</code>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="findallby"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#findallby" title="Direct link to heading">#</a>findAllBy</h3><p><code>findAllBy</code> queries return a promise which resolves to an array when any matching elements are found. The promise is rejected if no elements match after a default timeout of 4500ms.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</h5></div><div class="admonition-content"><p>In order to properly use <code>findBy</code> and <code>findAllBy</code> queries you need at least React >=16.9.0 (featuring async <code>act</code>) or React Native >=0.60 (which comes with React >=16.9.0).</p></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</h5></div><div class="admonition-content"><p><code>findBy</code> and <code>findAllBy</code> queries accept optional <code>waitForOptions</code> object argument which can contain <code>timeout</code> and <code>interval</code> properies which have the same meaning as respective options for <a href="https://callstack.github.io/react-native-testing-library/docs/api#waitfor"><code>waitFor</code></a> function.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="queries"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#queries" title="Direct link to heading">#</a>Queries</h2><p><em>Note: most methods like this one return a <a href="https://reactjs.org/docs/test-renderer.html#testinstance"><code>ReactTestInstance</code></a> with following properties that you may be interested in:</em></p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token plain">type ReactTestInstance </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> string </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> Function</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> props</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">propName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#393A34">]</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> any </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> parent</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> ReactTestInstance</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Array</span><span class="token operator" style="color:#393A34"><</span><span class="token plain">ReactTestInstance </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> string</span><span class="token operator" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bytext"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bytext" title="Direct link to heading">#</a><code>ByText</code></h3><blockquote><p>getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching text – may be a string or regular expression.</p><p>This method will join <code><Text></code> siblings to find matches, similarly to <a href="https://facebook.github.io/react-native/docs/text#containers">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="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByText </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'banana'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="byplaceholdertext"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#byplaceholdertext" title="Direct link to heading">#</a><code>ByPlaceholderText</code></h3><blockquote><p>getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText</p></blockquote><p>Returns a <code>ReactTestInstance</code> for a <code>TextInput</code> with a matching placeholder – may be a string or regular expression.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByPlaceholderText </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByPlaceholderText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'username'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bydisplayvalue"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bydisplayvalue" title="Direct link to heading">#</a><code>ByDisplayValue</code></h3><blockquote><p>getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue</p></blockquote><p>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="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByDisplayValue </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByDisplayValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'username'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bytestid"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bytestid" title="Direct link to heading">#</a><code>ByTestId</code></h3><blockquote><p>getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>testID</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByTestId </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByTestId</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'unique-id'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>Please be mindful when using these API and <strong>treat it as an escape hatch</strong>. Your users can't interact with <code>testID</code> anyhow, so you may end up writing tests that provide false sense of security. Favor text and accessibility queries instead.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11ylabel-byaccessibilitylabel-bylabeltext"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11ylabel-byaccessibilitylabel-bylabeltext" title="Direct link to heading">#</a><code>ByA11yLabel</code>, <code>ByAccessibilityLabel</code>, <code>ByLabelText</code></h3><blockquote><p>getByA11yLabel, getAllByA11yLabel, queryByA11yLabel, queryAllByA11yLabel, findByA11yLabel, findAllByA11yLabel
|
||
getByAccessibilityLabel, getAllByAccessibilityLabel, queryByAccessibilityLabel, queryAllByAccessibilityLabel, findByAccessibilityLabel, findAllByAccessibilityLabel
|
||
getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityLabel</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yLabel </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yLabel</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my-label'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11yhint-byaccessibilityhint-byhinttext"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11yhint-byaccessibilityhint-byhinttext" title="Direct link to heading">#</a><code>ByA11yHint</code>, <code>ByAccessibilityHint</code>, <code>ByHintText</code></h3><blockquote><p>getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint
|
||
getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint
|
||
getByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityHint</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yHint </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yHint</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my-hint'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11ystates-byaccessibilitystates"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11ystates-byaccessibilitystates" title="Direct link to heading">#</a><code>ByA11yStates</code>, <code>ByAccessibilityStates</code></h3><blockquote><p>getByA11yStates, getAllByA11yStates, queryByA11yStates, queryAllByA11yStates
|
||
getByAccessibilityStates, getAllByAccessibilityStates, queryByAccessibilityStates, queryAllByAccessibilityStates</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityStates</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yStates </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yStates</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'checked'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element2 </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yStates</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'checked'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11yrole-byaccessibilityrole-byrole"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11yrole-byaccessibilityrole-byrole" title="Direct link to heading">#</a><code>ByA11yRole</code>, <code>ByAccessibilityRole</code>, <code>ByRole</code></h3><blockquote><p>getByA11yRole, getAllByA11yRole, queryByA11yRole, queryAllByA11yRole, findByA11yRole, findAllByA11yRole
|
||
getByAccessibilityRole, getAllByAccessibilityRole, queryByAccessibilityRole, queryAllByAccessibilityRole, findByAccessibilityRole, findAllByAccessibilityRole
|
||
getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityRole</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yRole </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">MyComponent</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yRole</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'button'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11ystate-byaccessibilitystate"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11ystate-byaccessibilitystate" title="Direct link to heading">#</a><code>ByA11yState</code>, <code>ByAccessibilityState</code></h3><blockquote><p>getByA11yState, getAllByA11yState, queryByA11yState, queryAllByA11yState, findByA11yState, findAllByA11yState
|
||
getByAccessibilityState, getAllByAccessibilityState, queryByAccessibilityState, queryAllByAccessibilityState, findByAccessibilityState, findAllByAccessibilityState</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityState</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yState </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Component</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> disabled</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="bya11value-byaccessibilityvalue"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#bya11value-byaccessibilityvalue" title="Direct link to heading">#</a><code>ByA11Value</code>, <code>ByAccessibilityValue</code></h3><blockquote><p>getByA11yValue, getAllByA11yValue, queryByA11yValue, queryAllByA11yValue, findByA11yValue, findAllByA11yValue
|
||
getByAccessibilityValue, getAllByAccessibilityValue, queryByAccessibilityValue, queryAllByAccessibilityValue, findByAccessibilityValue, findAllByAccessibilityValue</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityValue</code> prop.</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> render </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@testing-library/react-native'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> getByA11yValue </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Component</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> element </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getByA11yValue</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> min</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">40</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="unit-testing-helpers"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unit-testing-helpers" title="Direct link to heading">#</a>Unit testing helpers</h2><blockquote><p>Use sparingly and responsibly, escape hatches here</p></blockquote><p><code>render</code> from <code>@testing-library/react-native</code> exposes additional queries that <strong>should not be used in component integration testing</strong>, but some users (like component library creators) interested in unit testing some components may find helpful.</p><details><summary>Queries helpful in unit testing</summary><p>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><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="unsafe_bytype"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unsafe_bytype" title="Direct link to heading">#</a><code>UNSAFE_ByType</code></h3><blockquote><p>UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching a React component type.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>This method has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="unsafe_byprops"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unsafe_byprops" title="Direct link to heading">#</a><code>UNSAFE_ByProps</code></h3><blockquote><p>UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps</p></blockquote><p>Returns a <code>ReactTestInstance</code> with matching props object.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>This method has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly.</p></div></div></details></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/callstack/react-native-testing-library/blob/master/docs/Queries.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/react-native-testing-library/docs/api"><div class="pagination-nav__link--sublabel">Previous</div><div class="pagination-nav__link--label">« API</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/react-native-testing-library/docs/migration-v7"><div class="pagination-nav__link--sublabel">Next</div><div class="pagination-nav__link--label">Migration to 7.0 »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_TbNY"><ul class="contents contents__left-border"><li><a href="#variants" class="contents__link">Variants</a><ul><li><a href="#getby" class="contents__link">getBy</a></li><li><a href="#getallby" class="contents__link">getAllBy</a></li><li><a href="#queryby" class="contents__link">queryBy</a></li><li><a href="#queryallby" class="contents__link">queryAllBy</a></li><li><a href="#findby" class="contents__link">findBy</a></li><li><a href="#findallby" class="contents__link">findAllBy</a></li></ul></li><li><a href="#queries" class="contents__link">Queries</a><ul><li><a href="#bytext" class="contents__link"><code>ByText</code></a></li><li><a href="#byplaceholdertext" class="contents__link"><code>ByPlaceholderText</code></a></li><li><a href="#bydisplayvalue" class="contents__link"><code>ByDisplayValue</code></a></li><li><a href="#bytestid" class="contents__link"><code>ByTestId</code></a></li><li><a href="#bya11ylabel-byaccessibilitylabel-bylabeltext" class="contents__link"><code>ByA11yLabel</code>, <code>ByAccessibilityLabel</code>, <code>ByLabelText</code></a></li><li><a href="#bya11yhint-byaccessibilityhint-byhinttext" class="contents__link"><code>ByA11yHint</code>, <code>ByAccessibilityHint</code>, <code>ByHintText</code></a></li><li><a href="#bya11ystates-byaccessibilitystates" class="contents__link"><code>ByA11yStates</code>, <code>ByAccessibilityStates</code></a></li><li><a href="#bya11yrole-byaccessibilityrole-byrole" class="contents__link"><code>ByA11yRole</code>, <code>ByAccessibilityRole</code>, <code>ByRole</code></a></li><li><a href="#bya11ystate-byaccessibilitystate" class="contents__link"><code>ByA11yState</code>, <code>ByAccessibilityState</code></a></li><li><a href="#bya11value-byaccessibilityvalue" class="contents__link"><code>ByA11Value</code>, <code>ByAccessibilityValue</code></a></li></ul></li><li><a href="#unit-testing-helpers" class="contents__link">Unit testing helpers</a><ul><li><a href="#unsafe_bytype" class="contents__link"><code>UNSAFE_ByType</code></a></li><li><a href="#unsafe_byprops" class="contents__link"><code>UNSAFE_ByProps</code></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/react-native-testing-library/docs/getting-started">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/react-native-testing-library/docs/api">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/react-native-testing-library">Stack Overflow</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://discord.gg/QbGezWe">Discord Channel</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library">GitHub</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/callstack/react-native-testing-library">Star</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 Callstack Open Source</div></div></div></footer>
|
||
</div>
|
||
|
||
<script src="/react-native-testing-library/styles.ea9abc4b.js"></script>
|
||
|
||
<script src="/react-native-testing-library/runtime~main.a6f715a7.js"></script>
|
||
|
||
<script src="/react-native-testing-library/main.d84b0ece.js"></script>
|
||
|
||
<script src="/react-native-testing-library/1.4fea9f82.js"></script>
|
||
|
||
<script src="/react-native-testing-library/2.34b7fab5.js"></script>
|
||
|
||
<script src="/react-native-testing-library/17.38dfff7b.js"></script>
|
||
|
||
<script src="/react-native-testing-library/e91cf13d.84e5f68d.js"></script>
|
||
|
||
<script src="/react-native-testing-library/17896441.324cc979.js"></script>
|
||
|
||
<script src="/react-native-testing-library/7ad239b9.3010f716.js"></script>
|
||
|
||
|
||
</body>
|
||
</html> |