react-native-elements
Version:
React Native Elements & UI Toolkit
99 lines (90 loc) • 15.4 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Testing · React Native Elements</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>We are using tests to make sure components keep their functionality between versions and edits.</p>
"/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Testing · React Native Elements"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-native-training.github.io//react-native-elements/index.html"/><meta property="og:description" content="<p>We are using tests to make sure components keep their functionality between versions and edits.</p>
"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native-elements/img/favicon.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"/><link rel="alternate" type="application/atom+xml" href="https://react-native-training.github.io//react-native-elements/blog/atom.xml" title="React Native Elements Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-native-training.github.io//react-native-elements/blog/feed.xml" title="React Native Elements Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-native-elements/css/prism.css"/><link rel="stylesheet" href="/react-native-elements/css/main.css"/><script src="/react-native-elements/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-elements/"><img class="logo" src="/react-native-elements/img/logo.png" alt="React Native Elements"/></a><a href="/react-native-elements/versions.html"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native-elements/docs/next/getting_started.html" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native-elements/docs/next/overview.html" target="_self">Components</a></li><li class=""><a href="/react-native-elements/help.html" target="_self">Help</a></li><li class=""><a href="https://github.com/react-native-training/react-native-elements" target="_self">GitHub</a></li><li class=""><a href="/react-native-elements/blog/" target="_self">Blog</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="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>Repo</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">It Starts Basic</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/getting_started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/overview.html">Overview</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/customization.html">Customization</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Components</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/avatar.html">Avatar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/badge.html">Badge</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/button_group.html">ButtonGroup</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/card.html">Card</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/checkbox.html">CheckBox</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/divider.html">Divider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/header.html">Header</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/icon.html">Icon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/input.html">Input</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/listitem.html">ListItem</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/overlay.html">Overlay</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/pricing.html">Pricing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/rating.html">Rating</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/searchbar.html">SearchBar</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/social_icon.html">SocialIcon</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/tile.html">Tile</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/tooltip.html">Tooltip</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Repo</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/contributing.html">Contributing</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-elements/docs/next/testing.html">Testing</a></li><li class="navListItem"><a class="navItem" href="/react-native-elements/docs/next/labels.html">Label Guide</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');
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"><a class="edit-page-link button" href="https://github.com/react-native-training/react-native-elements/edit/master/docs/testing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Testing</h1></header><article><div><span><p>We are using tests to make sure components keep their functionality between versions and edits.
They're many testing libraries for JavaScript and React Native, depending on what type of testing you're doing.</p>
<p>The type of tests we use on React Native Elements are <a href="#snapshot-testing">Snapshot</a>
and <a href="#functional-testing">Functional</a> tests.</p>
<h2><a class="anchor" aria-hidden="true" id="snapshot-testing"></a><a href="#snapshot-testing" 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>Snapshot Testing</h2>
<p>Snapshot testing sounds exactly like what it does! It takes snapshot of the structure of a rendered
component the props, and their values and saves it. Whenever a change is made it'll compare it to the original snapshot -
just to be super sure the change you wanted to make had the desired outcome.
If the outcomes is what you expected, then you need to <strong>update the snapshot</strong>, so that your changes will be the new
standard to compare to for changes in the future.</p>
<p>To update the snapshots run this command:</p>
<pre><code class="hljs css language-bash"><span class="hljs-comment"># yarn</span>
yarn <span class="hljs-built_in">test</span> -u
<span class="hljs-comment"># npm</span>
npm run <span class="hljs-built_in">test</span> -u
</code></pre>
<p>For Snapshot Testing, we use <a href="https://facebook.github.io/jest/">Jest</a>.</p>
<p>You can read more about snapshot testing <a href="https://facebook.github.io/jest/docs/en/snapshot-testing.html">here</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="functional-testing"></a><a href="#functional-testing" 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>Functional Testing</h2>
<p>Functional tests ensures that a component functions the way it should(<em>simplified</em>). This is important
for making changes to components, as it makes sure we don't break how something worked previously.</p>
<p>For example:</p>
<pre><code class="hljs css language-md">If a user touches on a button in the button group, then the button selected should be highlighted
and the previous one un-highlighted.
</code></pre>
<p>For Functional Testing, we use <a href="http://airbnb.io/enzyme/">Enzyme</a>.</p>
<p>You can read more about functional testing <a href="https://www.guru99.com/functional-testing.html">here</a>.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-elements/docs/next/contributing.html"><span class="arrow-prev">← </span><span>Contributing</span></a><a class="docs-next button" href="/react-native-elements/docs/next/labels.html"><span>Label Guide</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#snapshot-testing">Snapshot Testing</a></li><li><a href="#functional-testing">Functional Testing</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-elements/" class="nav-home"><img src="/react-native-elements/img/logo.png" alt="React Native Elements" width="120" height="58"/></a><div><h5>Docs</h5><a href="/react-native-elements/docs/en/getting_started.html">Getting Started</a><a href="/react-native-elements/docs/en/overview.html">Components</a></div><div><h5>Community</h5><a href="https://reactnativetraining.herokuapp.com/" target="_blank">Chat with us on Slack</a><a href="https://github.com/react-native-training/react-native-elements/issues/" target="_blank">Submit a bug or feature</a><a href="https://opencollective.com/react-native-elements" target="_blank">Support us on Open Collective</a></div><div><h5>More</h5><a href="https://github.com/react-native-training/react-native-elements" target="blank">GitHub</a><a class="github-button" href="https://github.com/react-native-training/react-native-elements" data-icon="octicon-star" data-count-href="/facebook/docusaurus/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-logo-container"><a href="http://reactnative.training" target="_blank"><img src="/react-native-elements/img/react-native-training.png" alt="React Native Training" width="90"/></a></section><section class="copyright">Copyright © 2019 React Native Training</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: '89e04a9445d16350e100c2d2421f2d39',
indexName: 'react_native_elements',
inputSelector: '#search_input_react'
});
</script></body></html>