mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
Michał Pierzchała
256 lines
42 KiB
HTML
256 lines
42 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>React Navigation · React Native Testing Library</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="This section deals with integrating `react-native-testing-library` with `react-navigation`, using Jest."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="React Navigation · 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="This section deals with integrating `react-native-testing-library` with `react-navigation`, using Jest."/><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"><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>Examples</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"><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 class="navGroup"><h3 class="navGroupCategoryTitle">Examples</h3><ul class=""><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-testing-library/docs/react-navigation">React Navigation</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">React Navigation</h1></header><article><div><span><p>This section deals with integrating <code>react-native-testing-library</code> with <code>react-navigation</code>, using Jest.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="setting-up"></a><a href="#setting-up" 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>Setting up</h2>
|
||
<p>Install the packages required for React Navigation. For this example, we will use a <a href="https://reactnavigation.org/docs/stack-navigator/">stack navigator</a> to transition to the second page when any of the items are clicked on.</p>
|
||
<pre><code class="hljs">$ yarn add <span class="hljs-meta">@react</span>-<span class="hljs-keyword">native</span>-community/masked-view <span class="hljs-meta">@react</span>-navigation/<span class="hljs-keyword">native</span> <span class="hljs-meta">@react</span>-navigation/stack react-<span class="hljs-keyword">native</span>-gesture-<span class="hljs-keyword">handler</span> react-<span class="hljs-keyword">native</span>-reanimated react-<span class="hljs-keyword">native</span>-safe-area-context react-<span class="hljs-keyword">native</span>-screens
|
||
</code></pre>
|
||
<p>Create an <a href="https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/AppNavigator.js"><code>./AppNavigator.js</code></a> component which will list the navigation stack:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token string">'react-native-gesture-handler'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">import</span> HomeScreen <span class="token keyword">from</span> <span class="token string">'./screens/HomeScreen'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> DetailsScreen <span class="token keyword">from</span> <span class="token string">'./screens/DetailsScreen'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> Screen<span class="token punctuation">,</span> Navigator <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Navigation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigator</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Screen</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Navigator</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<p>Create your two screens which we will transition to and from them. The homescreen, found in <a href="https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/screens/HomeScreen.js"><code>./screens/HomeScreen.js</code></a>, contains a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||
Text<span class="token punctuation">,</span>
|
||
View<span class="token punctuation">,</span>
|
||
FlatList<span class="token punctuation">,</span>
|
||
TouchableOpacity<span class="token punctuation">,</span>
|
||
StyleSheet<span class="token punctuation">,</span>
|
||
<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">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">HomeScreen</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>items<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span>
|
||
<span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> idx</span><span class="token punctuation">)</span> <span class="token operator">=></span> idx <span class="token operator">+</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 keyword">const</span> <span class="token function-variable function">onOpacityPress</span> <span class="token operator">=</span> <span class="token parameter">item</span> <span class="token operator">=></span> navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Details'</span><span class="token punctuation">,</span> item<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>header<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">List of numbers from 1 to 20</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||
<span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> idx</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>idx<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableOpacity</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><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">onOpacityPress</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Item number </span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> divider <span class="token operator">=</span> <span class="token string">'#DDDDDD'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
header<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
marginVertical<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
row<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
paddingVertical<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
paddingHorizontal<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||
borderBottomColor<span class="token operator">:</span> divider<span class="token punctuation">,</span>
|
||
borderBottomWidth<span class="token operator">:</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>The details screen, found in <a href="https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/screens/DetailsScreen.js"><code>./screens/DetailsScreen.js</code></a>, contains a header with the item number passed from the home screen:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token comment">// ./screens/DetailsScreen.js</span>
|
||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> StyleSheet<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">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">DetailsScreen</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> item <span class="token operator">=</span> Number<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>route<span class="token punctuation">.</span>params<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>header<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Showing details for </span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>body<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">the number you have chosen is </span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
header<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
marginVertical<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
body<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
textAlign<span class="token operator">:</span> <span class="token string">'center'</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="setting-up-the-test-environment"></a><a href="#setting-up-the-test-environment" 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>Setting up the test environment</h2>
|
||
<p>Install required dev dependencies:</p>
|
||
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> -D jest react-native-testing-library</span>
|
||
</code></pre>
|
||
<p>Create your <code>jest.config.js</code> file (or place the following properties in your <code>package.json</code> as a "jest" property)</p>
|
||
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
|
||
<span class="hljs-attr">preset</span>: <span class="hljs-string">'react-native'</span>,
|
||
<span class="hljs-attr">setupFiles</span>: [<span class="hljs-string">'./node_modules/react-native-gesture-handler/jestSetup.js'</span>],
|
||
<span class="hljs-attr">transformIgnorePatterns</span>: [
|
||
<span class="hljs-string">'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)'</span>,
|
||
],
|
||
};
|
||
</code></pre>
|
||
<p>Notice the 2 entries that don't come with the default React Native project:</p>
|
||
<ul>
|
||
<li><code>setupFiles</code> – an array of files that Jest is going to execute before running your tests. In this case, we run <code>react-native-gesture-handler/jestSetup.js</code> which sets up necessary mocks for <code>react-native-gesture-handler</code> native module</li>
|
||
<li><code>transformIgnorePatterns</code> – an array of paths that Jest ignores when transforming code. In this case, the negative lookahead regular expression is used, to tell Jest to transform (with Babel) every package inside <code>node_modules/</code> that starts with <code>react-native</code>, <code>@react-native-community</code> or <code>@react-navigation</code> (added by us, the rest is in <code>react-native</code> preset by default, so you don't have to worry about it).</li>
|
||
</ul>
|
||
<p>For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on.</p>
|
||
<p>Let's a <a href="https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/__tests__/AppNavigator.js"><code>AppNavigator.test.js</code></a> file in <code>src/__tests__</code> directory:</p>
|
||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/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> cleanup <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> AppNavigator <span class="token keyword">from</span> <span class="token string">'../AppNavigator'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420</span>
|
||
jest<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token string">'react-native/Libraries/Animated/src/NativeAnimatedHelper'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'Testing react navigation'</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 function">afterEach</span><span class="token punctuation">(</span>cleanup<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">'page contains the header and 10 items'</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> component <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AppNavigator</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> getByText<span class="token punctuation">,</span> getAllByText <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">render</span><span class="token punctuation">(</span>component<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> header <span class="token operator">=</span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'List of numbers from 1 to 20'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">getAllByText</span><span class="token punctuation">(</span><span class="token regex">/Item number/</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>header<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</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>items<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">10</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 function">test</span><span class="token punctuation">(</span><span class="token string">'clicking on one item takes you to the details screen'</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> component <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AppNavigator</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</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>component<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> toClick <span class="token operator">=</span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'Item number 5'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">fireEvent</span><span class="token punctuation">(</span>toClick<span class="token punctuation">,</span> <span class="token string">'press'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> newHeader <span class="token operator">=</span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'Showing details for 5'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> newBody <span class="token operator">=</span> <span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'the number you have chosen is 5'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">expect</span><span class="token punctuation">(</span>newHeader<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</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>newBody<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</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><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="running-tests"></a><a href="#running-tests" 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>Running tests</h2>
|
||
<p>To run the tests, place a test script inside your <code>package.json</code></p>
|
||
<pre><code class="hljs css language-json">{
|
||
<span class="hljs-attr">"scripts"</span>: {
|
||
<span class="hljs-attr">"test"</span>: <span class="hljs-string">"jest"</span>
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p>And run the <code>test</code> script with <code>npm test</code> or <code>yarn test</code>.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-testing-library/docs/api-queries"><span class="arrow-prev">← </span><span>Queries</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#setting-up">Setting up</a></li><li><a href="#setting-up-the-test-environment">Setting up the test environment</a></li><li><a href="#running-tests">Running tests</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> |