mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
Michał Pierzchała
113 lines
18 KiB
HTML
113 lines
18 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Getting Started · React Native Testing Library</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## The problem"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Getting Started · React Native Testing Library"/><meta property="og:type" content="website"/><meta property="og:url" content="https://callstack.github.io/react-native-testing-library/"/><meta property="og:description" content="## The problem"/><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="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script src="/react-native-testing-library/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native-testing-library/css/prism.css"/><link rel="stylesheet" href="/react-native-testing-library/css/main.css"/><script src="/react-native-testing-library/js/codetabs.js"></script></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 siteNavItemActive"><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><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Introduction</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 class=""><li class="navListItem navListItemActive"><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 class=""><li class="navListItem"><a class="navItem" href="/react-native-testing-library/docs/api">API</a></li><li class="navListItem"><a class="navItem" href="/react-native-testing-library/docs/api-queries">Queries</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, 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 docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">Getting Started</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="the-problem"></a><a href="#the-problem" 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>The problem</h2>
|
||
<p>You want to write maintainable tests for your React Native components without testing implementation details, but then you're told to use Enzyme, which you learn has no React Native adapter, meaning only shallow rendering is supported. And you want to render deep! But deep rendering may otherwise require jsdom (React Native isn't the web!), while doing deep rendering with <code>react-test-renderer</code> is so painful.</p>
|
||
<p>You would also like to use the newest React features, but you need to wait for your testing library's abstractions to catch up and it takes a while.</p>
|
||
<p>You finally want to approach testing using only best practices, while Enzyme may encourage assertions on implementation details.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="this-solution"></a><a href="#this-solution" 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>This solution</h2>
|
||
<p>The <code>react-native-testing-library</code> is a lightweight solution for testing your React Native components. It provides light utility functions on top of <code>react-test-renderer</code> letting you always be up to date with latest React features and write any component tests you like. It also prevents you from testing implementation details because we believe this is a very bad practice.</p>
|
||
<p>This library is a replacement for <a href="http://airbnb.io/enzyme/">Enzyme</a>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" 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>Example</h2>
|
||
<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> QuestionsBoard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../QuestionsBoard'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Question <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../Question'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">setAnswer</span><span class="token punctuation">(</span><span class="token parameter">question<span class="token punctuation">,</span> answer</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>question<span class="token punctuation">,</span> answer<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'should verify two questions'</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>
|
||
jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> <span class="token string">'verifyQuestions'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getAllByA11yRole<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><span class="token class-name">QuestionsBoard</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><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 keyword">const</span> allQuestions <span class="token operator">=</span> <span class="token function">getAllByA11yRole</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">setAnswer</span><span class="token punctuation">(</span>allQuestions<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'a1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">setAnswer</span><span class="token punctuation">(</span>allQuestions<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'a2'</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">getByText</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 punctuation">;</span>
|
||
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>verifyQuestions<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeCalledWith</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string">'1'</span><span class="token operator">:</span> <span class="token punctuation">{</span> q<span class="token operator">:</span> <span class="token string">'q1'</span><span class="token punctuation">,</span> a<span class="token operator">:</span> <span class="token string">'a1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token string">'2'</span><span class="token operator">:</span> <span class="token punctuation">{</span> q<span class="token operator">:</span> <span class="token string">'q2'</span><span class="token punctuation">,</span> a<span class="token operator">:</span> <span class="token string">'a2'</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 punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="installation"></a><a href="#installation" 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>Installation</h2>
|
||
<p>Open a Terminal in your project's folder and run:</p>
|
||
<pre><code class="hljs css language-sh">yarn add --dev react-native-testing-library
|
||
</code></pre>
|
||
<p>This library has a peerDependencies listing for <code>react-test-renderer</code> and, of course, <code>react</code>. Make sure to install them too!</p>
|
||
<p>As you may have noticed, it's not tied to React Native at all – you can safely use it in your React components if you feel like not interacting directly with DOM.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-next button" href="/react-native-testing-library/docs/api"><span>API</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#the-problem">The problem</a></li><li><a href="#this-solution">This solution</a></li><li><a href="#example">Example</a></li><li><a href="#installation">Installation</a></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 © 2020 Callstack Open Source</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: 'cd9b8b73f97b64ed04570e41c507683f',
|
||
indexName: 'react-native-testing-library',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |