mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
6659225bbc
Deploy website version based on 11489b0e5e
309 lines
71 KiB
HTML
309 lines
71 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>API · React Native Testing Library</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>This page gathers public API of <code>react-native-testing-library</code> along with usage examples.</p>
|
||
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="API · 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="<p>This page gathers public API of <code>react-native-testing-library</code> along with usage examples.</p>
|
||
"/><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/undefined"/><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/"><h2 class="headerTitle">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 navListItemActive"><a class="navItem" href="/react-native-testing-library/docs/api">API</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">API</h1></header><article><div><span><p>This page gathers public API of <code>react-native-testing-library</code> along with usage examples.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="render"></a><a href="#render" 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>render</code></h2>
|
||
<ul>
|
||
<li><a href="https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/render.test.js"><code>Example code</code></a></li>
|
||
</ul>
|
||
<p>Defined as:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span>
|
||
component<span class="token punctuation">:</span> React<span class="token punctuation">.</span>Element<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>any</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
options<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">/* You won't often use this, but it's helpful when testing refs */</span>
|
||
createNodeMock<span class="token punctuation">:</span> <span class="token punctuation">(</span>element<span class="token punctuation">:</span> React<span class="token punctuation">.</span>Element<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>any</span><span class="token punctuation">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> any<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">:</span> RenderResult <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<p>Deeply renders given React element and returns helpers to query the output components structure.</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> getByText <span class="token comment">/*...*/</span> <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>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Returns a <code>RenderResult</code> object with following properties:</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getbytestid-testid-string"></a><a href="#getbytestid-testid-string" 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>getByTestId: (testID: string)</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching <code>testID</code> prop. Throws when no matches.</p>
|
||
<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="getbytext-text-string-regexp"></a><a href="#getbytext-text-string-regexp" 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>getByText: (text: string | RegExp)</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching text – may be a string or regular expression. Throws when no matches.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getallbytext-text-string-regexp"></a><a href="#getallbytext-text-string-regexp" 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>getAllByText: (text: string | RegExp)</code></h3>
|
||
<p>A method returning an array of <code>ReactTestInstance</code>s with matching text – may be a string or regular expression.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getbyplaceholder-placeholder-string-regexp"></a><a href="#getbyplaceholder-placeholder-string-regexp" 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>getByPlaceholder: (placeholder: string | RegExp)</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> for a <code>TextInput</code> with a matching placeholder – may be a string or regular expression. Throws when no matches.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getallbyplaceholder-placeholder-string-regexp"></a><a href="#getallbyplaceholder-placeholder-string-regexp" 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>getAllByPlaceholder: (placeholder: string | RegExp)</code></h3>
|
||
<p>A method returning an array of <code>ReactTestInstance</code>s for <code>TextInput</code>'s with a matching placeholder – may be a string or regular expression.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getbyprops-props-propname-string-any"></a><a href="#getbyprops-props-propname-string-any" 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>getByProps: (props: { [propName: string]: any })</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching props object. Throws when no matches.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getallbyprops-props-propname-string-any"></a><a href="#getallbyprops-props-propname-string-any" 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>getAllByProps: (props: { [propName: string]: any })</code></h3>
|
||
<p>A method returning an array of <code>ReactTestInstance</code>s with matching props object.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="getbytype-type-reactcomponenttype"></a><a href="#getbytype-type-reactcomponenttype" 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>getByType: (type: React.ComponentType<*>)</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="getallbytype-type-reactcomponenttype"></a><a href="#getallbytype-type-reactcomponenttype" 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>getAllByType: (type: React.ComponentType<*>)</code></h3>
|
||
<blockquote>
|
||
<p>Note: added in v1.4</p>
|
||
</blockquote>
|
||
<p>A method returning an array of <code>ReactTestInstance</code>s with matching a React component type.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="deprecated-getbyname-name-reactcomponenttype"></a><a href="#deprecated-getbyname-name-reactcomponenttype" 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>[DEPRECATED] getByName: (name: React.ComponentType<*>)</code></h3>
|
||
<p>A method returning a <code>ReactTestInstance</code> with matching a React component type. Throws when no matches.</p>
|
||
<blockquote>
|
||
<p>This method has been <strong>deprecated</strong> because using it results in fragile tests that may break between minor React Native versions. It will be removed in next major release (v2.0). Use <a href="#getbytype-type-reactcomponenttype"><code>getByType</code></a> instead.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" aria-hidden="true" id="deprecated-getallbyname-name-reactcomponenttype"></a><a href="#deprecated-getallbyname-name-reactcomponenttype" 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>[DEPRECATED] getAllByName: (name: React.ComponentType<*>)</code></h3>
|
||
<p>A method returning an array of <code>ReactTestInstance</code>s with matching a React component type.</p>
|
||
<blockquote>
|
||
<p>This method has been <strong>deprecated</strong> because using it results in fragile tests that may break between minor React Native versions. It will be removed in next major release (v2.0). Use <a href="#getallbytype-type-reactcomponenttype"><code>getAllByType</code></a> instead.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" aria-hidden="true" id="update-element-reactelement-any-void"></a><a href="#update-element-reactelement-any-void" 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>update: (element: React.Element<any>) => void</code></h3>
|
||
<p>Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="unmount-void"></a><a href="#unmount-void" 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>unmount: () => void</code></h3>
|
||
<p>Unmount the in-memory tree, triggering the appropriate lifecycle events</p>
|
||
<p>When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom <code>render</code> method. <a href="https://github.com/kentcdodds/react-testing-library#custom-render">Follow this great guide on how to set this up</a>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="debug-message-string-void"></a><a href="#debug-message-string-void" 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>debug: (message?: string) => void</code></h3>
|
||
<p>Prints deeply rendered component passed to <code>render</code> with optional message on top. Uses <a href="#debug">debug.deep</a> under the hood, but it's easier to use.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token punctuation">{</span> debug <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>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">debug</span><span class="token punctuation">(</span><span class="token string">'optional message'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>logs optional message and colored JSX:</p>
|
||
<pre><code class="hljs css language-jsx">optional message
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TouchableOpacity</span>
|
||
<span class="token attr-name">activeOpacity</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0.2</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>Function bound fn<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Text</span><span class="token punctuation">></span></span>Press me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TouchableOpacity</span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="debugshallow-message-string-void"></a><a href="#debugshallow-message-string-void" 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>debug.shallow: (message?: string) => void</code></h3>
|
||
<p>Prints shallowly rendered component passed to <code>render</code> with optional message on top. Uses <a href="#debug">debug.shallow</a> under the hood, but it's easier to use.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="tojson-reacttestrendererjson"></a><a href="#tojson-reacttestrendererjson" 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>toJSON: () => ?ReactTestRendererJSON</code></h3>
|
||
<p>Get the rendered component JSON representation, e.g. for snapshot testing.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="shallow"></a><a href="#shallow" 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>shallow</code></h2>
|
||
<ul>
|
||
<li><a href="https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/shallow.test.js"><code>Example code</code></a></li>
|
||
</ul>
|
||
<p>Shallowly renders given React component. Since it doesn't return helpers to query the output, it's mostly advised to used for snapshot testing (short snapshots are best for code reviewers).</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> shallow <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 function">test</span><span class="token punctuation">(</span><span class="token string">'Component has a structure'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> output <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">shallow</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="fireevent"></a><a href="#fireevent" 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>fireEvent</code></h2>
|
||
<ul>
|
||
<li><a href="https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/fireEvent.test.js"><code>Example code</code></a></li>
|
||
</ul>
|
||
<p>Invokes a given event handler (whether native or custom) on the element, bubbling to the root of the rendered tree. The three most common events (<code>press</code>, <code>changeText</code>, and <code>scroll</code>) have been aliased for convenience.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="fireevent-element-reacttestinstance-eventname-string-data-void"></a><a href="#fireevent-element-reacttestinstance-eventname-string-data-void" 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>fireEvent: (element: ReactTestInstance, eventName: string, data?: *) => void</code></h3>
|
||
<p>Invokes named event handler on the element or parent element in the tree. For better readability, <code>fireEvent</code> strips the <code>on</code> part of the handler prop name, so it will fire <code>onMyCustomEvent</code> when <code>myCustomEvent</code> is passed as <code>eventName</code>.</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> fireEvent <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">import</span> <span class="token punctuation">{</span> MyComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./MyComponent'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> onEventMock <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</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 attr-name">testID</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span> <span class="token attr-name">onMyCustomEvent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onEventMock<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">fireEvent</span><span class="token punctuation">(</span><span class="token function">getByTestId</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'myCustomEvent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>An example using <code>fireEvent</code> with native events that aren't already aliased by the <code>fireEvent</code> api.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> TextInput<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> fireEvent<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> onBlurMock <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</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>View</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TextInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>my placeholder<span class="token punctuation">"</span></span> <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onBlurMock<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>View</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">fireEvent</span><span class="token punctuation">(</span><span class="token function">getByPlaceholder</span><span class="token punctuation">(</span><span class="token string">'my placeholder'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'blur'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="fireeventpress-element-reacttestinstance-void"></a><a href="#fireeventpress-element-reacttestinstance-void" 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>fireEvent.press: (element: ReactTestInstance) => void</code></h3>
|
||
<p>Invokes <code>press</code> event handler on the element or parent element in the tree.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> View<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableOpacity <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> render<span class="token punctuation">,</span> fireEvent <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> onPressMock <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</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>View</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TouchableOpacity</span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onPressMock<span class="token punctuation">}</span></span> <span class="token attr-name">testID</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Text</span><span class="token punctuation">></span></span>Press me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TouchableOpacity</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>View</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
fireEvent<span class="token punctuation">.</span><span class="token function">press</span><span class="token punctuation">(</span><span class="token function">getByTestId</span><span class="token punctuation">(</span><span class="token string">'button'</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="fireeventchangetext-element-reacttestinstance-data-void"></a><a href="#fireeventchangetext-element-reacttestinstance-data-void" 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>fireEvent.changeText: (element: ReactTestInstance, data?: *) => void</code></h3>
|
||
<p>Invokes <code>changeText</code> event handler on the element or parent element in the tree.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> View<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> render<span class="token punctuation">,</span> fireEvent <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> onChangeTextMock <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token constant">CHANGE_TEXT</span> <span class="token operator">=</span> <span class="token string">'content'</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>View</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TextInput</span> <span class="token attr-name">testID</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-input<span class="token punctuation">"</span></span> <span class="token attr-name">onChangeText</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChangeTextMock<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>View</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
fireEvent<span class="token punctuation">.</span><span class="token function">changeText</span><span class="token punctuation">(</span><span class="token function">getByTestId</span><span class="token punctuation">(</span><span class="token string">'text-input'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token constant">CHANGE_TEXT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="fireeventscroll-element-reacttestinstance-data-void"></a><a href="#fireeventscroll-element-reacttestinstance-data-void" 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>fireEvent.scroll: (element: ReactTestInstance, data?: *) => void</code></h3>
|
||
<p>Invokes <code>scroll</code> event handler on the element or parent element in the tree.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> ScrollView<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> render<span class="token punctuation">,</span> fireEvent <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> onScrollMock <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> eventData <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
y<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</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>ScrollView</span> <span class="token attr-name">testID</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scroll-view<span class="token punctuation">"</span></span> <span class="token attr-name">onScroll</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onScrollMock<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Text</span><span class="token punctuation">></span></span><span class="token constant">XD</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ScrollView</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
fireEvent<span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token function">getByTestId</span><span class="token punctuation">(</span><span class="token string">'scroll-view'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> eventData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="waitforelement"></a><a href="#waitforelement" 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>waitForElement</code></h2>
|
||
<ul>
|
||
<li><a href="https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/waitForElement.test.js"><code>Example code</code></a></li>
|
||
</ul>
|
||
<p>Defined as:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> waitForExpect<span class="token operator"><</span><span class="token constant">T</span><span class="token punctuation">:</span> <span class="token operator">*</span><span class="token operator">></span><span class="token punctuation">(</span>
|
||
expectation<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">T</span><span class="token punctuation">,</span>
|
||
timeout<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">4500</span><span class="token punctuation">,</span>
|
||
interval<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">50</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">:</span> Promise<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>T</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<p>Waits for non-deterministic periods of time until your element appears or times out. <code>waitForExpect</code> periodically calls <code>expectation</code> every <code>interval</code> milliseconds to determine whether the element appeared or not.</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> waitForElement <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-testing-library'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'waiting for an Banana to be ready'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>Banana</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">await</span> <span class="token function">waitForElement</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'Banana ready'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>If you're using Jest's <a href="https://jestjs.io/docs/en/timer-mocks#docsNav">Timer Mocks</a>, remember not to use <code>async/await</code> syntax as it will stall your tests.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="debug"></a><a href="#debug" 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>debug</code></h2>
|
||
<ul>
|
||
<li><a href="https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/debug.test.js"><code>Example code</code></a></li>
|
||
</ul>
|
||
<p>Log prettified shallowly rendered component or test instance (just like snapshot) to stdout.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> debug <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 function">debug</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
debug<span class="token punctuation">.</span><span class="token function">shallow</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// an alias for `debug`</span>
|
||
</code></pre>
|
||
<p>logs:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TouchableOpacity</span>
|
||
<span class="token attr-name">activeOpacity</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0.2</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>Function bound fn<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TextComponent</span>
|
||
<span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Press me<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TouchableOpacity</span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<p>There's also <code>debug.deep</code> that renders deeply to stdout.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> debug <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>
|
||
|
||
debug<span class="token punctuation">.</span><span class="token function">deep</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Component</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
debug<span class="token punctuation">.</span><span class="token function">deep</span><span class="token punctuation">(</span><span class="token function">toJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'actually debug JSON too'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// useful when Component state changes</span>
|
||
</code></pre>
|
||
<p>logs:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token operator"><</span>View
|
||
accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
||
isTVSelectable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
||
onResponderGrant<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>Function bound touchableHandleResponderGrant<span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||
<span class="token comment">// ... more props</span>
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span>
|
||
Object <span class="token punctuation">{</span>
|
||
\\<span class="token string">"opacity\\"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token operator">></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Text</span><span class="token punctuation">></span></span>
|
||
Press me
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>View</span><span class="token punctuation">></span></span>
|
||
</code></pre>
|
||
<p>Optionally you can provide a string message as a second argument to <code>debug</code>, which will be displayed right after the component.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="flushmicrotasksqueue"></a><a href="#flushmicrotasksqueue" 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>flushMicrotasksQueue</code></h2>
|
||
<p>Waits for microtasks queue to flush. Useful if you want to wait for some promises with <code>async/await</code>.</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> flushMicrotasksQueue<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 function">test</span><span class="token punctuation">(</span><span class="token string">'fetch data'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>FetchData</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'fetch'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">await</span> <span class="token function">flushMicrotasksQueue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'fetch'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'loaded'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="query-apis"></a><a href="#query-apis" 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>query</code> APIs</h2>
|
||
<p>Each of the get APIs listed in the render section above have a complimentary query API. The get APIs will throw errors if a proper node cannot be found. This is normally the desired effect. However, if you want to make an assertion that an element is not present in the hierarchy, then you can use the query API instead:</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> queryByText <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>Form</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> submitButton <span class="token operator">=</span> <span class="token function">queryByText</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>submitButton<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// it doesn't exist</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="queryall-apis"></a><a href="#queryall-apis" 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>queryAll</code> APIs</h2>
|
||
<p>Each of the query APIs have a corresponding queryAll version that always returns an Array of matching nodes. getAll is the same but throws when the array has a length of 0.</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> queryAllByText <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>Forms</span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> submitButtons <span class="token operator">=</span> <span class="token function">queryAllByText</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>submitButtons<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveLength</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// expect 3 elements</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="act"></a><a href="#act" 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>act</code></h2>
|
||
<p>Useful function to help testing components that use hooks API. By default any <code>render</code> and <code>fireEvent</code> calls are wrapped by this function, so there is no need to wrap it manually. This method is re-exported from <a href="https://github.com/facebook/react/blob/master/packages/react-test-renderer/src/ReactTestRenderer.js#L567]"><code>react-test-renderer</code></a>.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-testing-library/docs/getting-started"><span class="arrow-prev">← </span><span>Getting Started</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#render"><code>render</code></a><ul class="toc-headings"><li><a href="#getbytestid-testid-string"><code>getByTestId: (testID: string)</code></a></li><li><a href="#getbytext-text-string-regexp"><code>getByText: (text: string | RegExp)</code></a></li><li><a href="#getallbytext-text-string-regexp"><code>getAllByText: (text: string | RegExp)</code></a></li><li><a href="#getbyplaceholder-placeholder-string-regexp"><code>getByPlaceholder: (placeholder: string | RegExp)</code></a></li><li><a href="#getallbyplaceholder-placeholder-string-regexp"><code>getAllByPlaceholder: (placeholder: string | RegExp)</code></a></li><li><a href="#getbyprops-props-propname-string-any"><code>getByProps: (props: { [propName: string]: any })</code></a></li><li><a href="#getallbyprops-props-propname-string-any"><code>getAllByProps: (props: { [propName: string]: any })</code></a></li><li><a href="#getbytype-type-reactcomponenttype"><code>getByType: (type: React.ComponentType)</code></a></li><li><a href="#getallbytype-type-reactcomponenttype"><code>getAllByType: (type: React.ComponentType)</code></a></li><li><a href="#deprecated-getbyname-name-reactcomponenttype"><code>[DEPRECATED] getByName: (name: React.ComponentType)</code></a></li><li><a href="#deprecated-getallbyname-name-reactcomponenttype"><code>[DEPRECATED] getAllByName: (name: React.ComponentType)</code></a></li><li><a href="#update-element-reactelement-any-void"><code>update: (element: React.Element) => void</code></a></li><li><a href="#unmount-void"><code>unmount: () => void</code></a></li><li><a href="#debug-message-string-void"><code>debug: (message?: string) => void</code></a></li><li><a href="#debugshallow-message-string-void"><code>debug.shallow: (message?: string) => void</code></a></li><li><a href="#tojson-reacttestrendererjson"><code>toJSON: () => ?ReactTestRendererJSON</code></a></li></ul></li><li><a href="#shallow"><code>shallow</code></a></li><li><a href="#fireevent"><code>fireEvent</code></a><ul class="toc-headings"><li><a href="#fireevent-element-reacttestinstance-eventname-string-data-void"><code>fireEvent: (element: ReactTestInstance, eventName: string, data?: *) => void</code></a></li><li><a href="#fireeventpress-element-reacttestinstance-void"><code>fireEvent.press: (element: ReactTestInstance) => void</code></a></li><li><a href="#fireeventchangetext-element-reacttestinstance-data-void"><code>fireEvent.changeText: (element: ReactTestInstance, data?: *) => void</code></a></li><li><a href="#fireeventscroll-element-reacttestinstance-data-void"><code>fireEvent.scroll: (element: ReactTestInstance, data?: *) => void</code></a></li></ul></li><li><a href="#waitforelement"><code>waitForElement</code></a></li><li><a href="#debug"><code>debug</code></a></li><li><a href="#flushmicrotasksqueue"><code>flushMicrotasksQueue</code></a></li><li><a href="#query-apis"><code>query</code> APIs</a></li><li><a href="#queryall-apis"><code>queryAll</code> APIs</a></li><li><a href="#act"><code>act</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-testing-library/" class="nav-home"></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> |