mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
Michał Pierzchała
164 lines
35 KiB
HTML
164 lines
35 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Queries · React Native Testing Library</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<h2><a class="anchor" aria-hidden="true" id="variants"></a><a href="#variants" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Variants</h2>
|
||
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Queries · React Native Testing Library"/><meta property="og:type" content="website"/><meta property="og:url" content="https://callstack.github.io/react-native-testing-library/index.html"/><meta property="og:description" content="<h2><a class="anchor" aria-hidden="true" id="variants"></a><a href="#variants" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Variants</h2>
|
||
"/><meta property="og:image" content="https://callstack.github.io/react-native-testing-library/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://callstack.github.io/react-native-testing-library/img/docusaurus.png"/><link rel="shortcut icon" href="/react-native-testing-library/img/owl.png"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="stylesheet" href="/react-native-testing-library/css/prism.css"/><link rel="stylesheet" href="/react-native-testing-library/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-testing-library/"><img class="logo" src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library"/><h2 class="headerTitleWithLogo">React Native Testing Library</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native-testing-library/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="https://github.com/callstack/react-native-testing-library" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>API Reference</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Introduction</h3><ul><li class="navListItem"><a class="navItem" href="/react-native-testing-library/docs/getting-started">Getting Started</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">API Reference</h3><ul><li class="navListItem"><a class="navItem" href="/react-native-testing-library/docs/api">API</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-testing-library/docs/api-queries">Queries</a></li></ul></div></div></section></div><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Queries</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="variants"></a><a href="#variants" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></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 class="anchor" aria-hidden="true" id="getby"></a><a href="#getby" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>getBy</h3>
|
||
<p><code>getBy*</code> queries returns the first matching node for a query, and throws an
|
||
error if no elements match.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getallby"></a><a href="#getallby" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>getAllBy</h3>
|
||
<p><code>getAllBy*</code> queries return an array of all matching nodes for a query, and
|
||
throws an error if no elements match.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="queryby"></a><a href="#queryby" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>queryBy</h3>
|
||
<p><code>queryBy*</code> queries returns the first matching node for a query, and return
|
||
<code>null</code> if no elements match. This is useful for asserting an element is not
|
||
present.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="queryallby"></a><a href="#queryallby" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></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>
|
||
<h2><a class="anchor" aria-hidden="true" id="queries"></a><a href="#queries" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></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>
|
||
<pre><code class="hljs css language-jsx">type ReactTestInstance <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
type<span class="token punctuation">:</span> string <span class="token operator">|</span> Function<span class="token punctuation">,</span>
|
||
props<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>propName<span class="token punctuation">:</span> string<span class="token punctuation">]</span><span class="token punctuation">:</span> any <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
parent<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token operator">|</span> ReactTestInstance<span class="token punctuation">,</span>
|
||
children<span class="token punctuation">:</span> Array<span class="token operator"><</span>ReactTestInstance <span class="token operator">|</span> string<span class="token operator">></span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bytext"></a><a href="#bytext" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByText</code></h3>
|
||
<blockquote>
|
||
<p>getByText, getAllByText, queryByText, queryAllByText</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>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByText <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'banana'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="byplaceholder"></a><a href="#byplaceholder" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByPlaceholder</code></h3>
|
||
<blockquote>
|
||
<p>getByPlaceholder, getAllByPlaceholder, queryByPlaceholder, queryAllByPlaceholder</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>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByPlaceholder <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByPlaceholder</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bydisplayvalue"></a><a href="#bydisplayvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByDisplayValue</code></h3>
|
||
<blockquote>
|
||
<p>getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue</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>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByDisplayValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByDisplayValue</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bytestid"></a><a href="#bytestid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByTestId</code></h3>
|
||
<blockquote>
|
||
<p>getByTestId, getAllByTestId, queryByTestId, queryAllByTestId</p>
|
||
</blockquote>
|
||
<p>Returns a <code>ReactTestInstance</code> with matching <code>testID</code> prop.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByTestId <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByTestId</span><span class="token punctuation">(</span><span class="token string">'unique-id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bya11ylabel-byaccessibilitylabel"></a><a href="#bya11ylabel-byaccessibilitylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByA11yLabel</code>, <code>ByAccessibilityLabel</code></h3>
|
||
<blockquote>
|
||
<p>getByA11yLabel, getAllByA11yLabel, queryByA11yLabel, queryAllByA11yLabel
|
||
getByAccessibilityLabel, getAllByAccessibilityLabel, queryByAccessibilityLabel, queryAllByAccessibilityLabel</p>
|
||
</blockquote>
|
||
<p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityLabel</code> prop.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByA11yLabel <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByA11yLabel</span><span class="token punctuation">(</span><span class="token string">'my-label'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bya11yhint-byaccessibilityhint"></a><a href="#bya11yhint-byaccessibilityhint" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByA11yHint</code>, <code>ByAccessibilityHint</code></h3>
|
||
<blockquote>
|
||
<p>getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint
|
||
getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint</p>
|
||
</blockquote>
|
||
<p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityHint</code> prop.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByA11yHint <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByA11yHint</span><span class="token punctuation">(</span><span class="token string">'my-hint'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bya11ystates-byaccessibilitystates"></a><a href="#bya11ystates-byaccessibilitystates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></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>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByA11yStates <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByA11yStates</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'checked'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element2 <span class="token operator">=</span> <span class="token function">getByA11yStates</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="bya11yrole-byaccessibilityrole"></a><a href="#bya11yrole-byaccessibilityrole" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByA11yRole</code>, <code>ByAccessibilityRole</code></h3>
|
||
<blockquote>
|
||
<p>getByA11yRole, getAllByA11yRole, queryByA11yRole, queryAllByA11yRole
|
||
getByAccessibilityRole, getAllByAccessibilityRole, queryByAccessibilityRole, queryAllByAccessibilityRole</p>
|
||
</blockquote>
|
||
<p>Returns a <code>ReactTestInstance</code> with matching <code>accessibilityRole</code> prop.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByA11yRole <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyComponent</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">getByA11yRole</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="unit-testing-helpers"></a><a href="#unit-testing-helpers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Unit testing helpers</h2>
|
||
<blockquote>
|
||
<p>Use sparingly and responsibly, escape hatches here</p>
|
||
</blockquote>
|
||
<p><code>render</code> from <code>react-native-testing-library</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>
|
||
<p><details>
|
||
<summary>Queries helpful in unit testing</summary></p>
|
||
<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 class="anchor" aria-hidden="true" id="bytype"></a><a href="#bytype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByType</code></h3>
|
||
<blockquote>
|
||
<p>Note: added in v1.4</p>
|
||
</blockquote>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching a React component type. Throws when no matches.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="byprops"></a><a href="#byprops" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByProps</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching props object</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="byname"></a><a href="#byname" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ByName</code></h3>
|
||
<blockquote>
|
||
<p>This method has been <strong>deprecated</strong> because using it results in fragile tests that may break between minor React Native versions. <strong>DON'T USE IT</strong>. It will be removed in next major release (v2.0). Use <a href="#bytestid"><code>getByTestId</code></a> instead. It's listed here only for back-compat purposes for early adopters of the library</p>
|
||
</blockquote>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching a React component type. Throws when no matches.</p>
|
||
<p></details></p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-testing-library/docs/api"><span class="arrow-prev">← </span><span>API</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#variants">Variants</a><ul class="toc-headings"><li><a href="#getby">getBy</a></li><li><a href="#getallby">getAllBy</a></li><li><a href="#queryby">queryBy</a></li><li><a href="#queryallby">queryAllBy</a></li></ul></li><li><a href="#queries">Queries</a><ul class="toc-headings"><li><a href="#bytext"><code>ByText</code></a></li><li><a href="#byplaceholder"><code>ByPlaceholder</code></a></li><li><a href="#bydisplayvalue"><code>ByDisplayValue</code></a></li><li><a href="#bytestid"><code>ByTestId</code></a></li><li><a href="#bya11ylabel-byaccessibilitylabel"><code>ByA11yLabel</code>, <code>ByAccessibilityLabel</code></a></li><li><a href="#bya11yhint-byaccessibilityhint"><code>ByA11yHint</code>, <code>ByAccessibilityHint</code></a></li><li><a href="#bya11ystates-byaccessibilitystates"><code>ByA11yStates</code>, <code>ByAccessibilityStates</code></a></li><li><a href="#bya11yrole-byaccessibilityrole"><code>ByA11yRole</code>, <code>ByAccessibilityRole</code></a></li></ul></li><li><a href="#unit-testing-helpers">Unit testing helpers</a><ul class="toc-headings"><li><a href="#bytype"><code>ByType</code></a></li><li><a href="#byprops"><code>ByProps</code></a></li><li><a href="#byname"><code>ByName</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-testing-library/" class="nav-home"><img src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library" width="66" height="58"/></a><div><h5>Docs</h5><a href="/react-native-testing-library/docs/en/getting-started.html">Getting Started</a><a href="/react-native-testing-library/docs/en/api.html">API Reference</a></div><div><h5>Community</h5><a href="http://stackoverflow.com/questions/tagged/react-native-testing-library" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://discord.gg/QbGezWe">Discord channel</a></div><div><h5>More</h5><a href="https://github.com/callstack/react-native-testing-library">GitHub</a><a class="github-button" href="https://github.com/callstack/react-native-testing-library" data-icon="octicon-star" data-count-href="/callstack/react-native-testing-library/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 Callstack Open Source</section></footer></div></body></html> |