kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_testing-overview.html
at main 75 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-testing-overview" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Testing · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/testing-overview><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Testing · React Native"><meta data-rh=true name=description content="This guide introduces React Native developers to the key concepts behind testing, how to write good tests, and what kinds of tests you can incorporate into your workflow."><meta data-rh=true property=og:description content="This guide introduces React Native developers to the key concepts behind testing, how to write good tests, and what kinds of tests you can incorporate into your workflow."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/testing-overview><link data-rh=true rel=alternate href=https://reactnative.dev/docs/testing-overview hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/testing-overview hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/testing-overview>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/testing-overview>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/testing-overview>0.79</a><li><a class=dropdown__link href=/docs/0.78/testing-overview>0.78</a><li><a class=dropdown__link href=/docs/0.77/testing-overview>0.77</a><li><a class=dropdown__link href=/docs/0.76/testing-overview>0.76</a><li><a class=dropdown__link href=/docs/0.75/testing-overview>0.75</a><li><a class=dropdown__link href=/docs/0.74/testing-overview>0.74</a><li><a class=dropdown__link href=/docs/0.73/testing-overview>0.73</a><li><a class=dropdown__link href=/docs/0.72/testing-overview>0.72</a><li><a class=dropdown__link href=/docs/0.71/testing-overview>0.71</a><li><a class=dropdown__link href=/docs/0.70/testing-overview>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/environment-setup>Environment setup</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/style>UI & Interaction</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/debugging>Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/testing-overview>Testing</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/testing-overview>Testing</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/performance>Performance</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Testing</h1></header><p>As your codebase expands, small errors and edge cases you don’t expect can cascade into larger failures. Bugs lead to bad user experience and ultimately, business losses. One way to prevent fragile programming is to test your code before releasing it into the wild.</p> 5<p>In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests.</p> 6<img src=/docs/assets/diagram_testing.svg alt="Testing is a cycle of fixing, testing, and either passing to release or failing back into testing."> 7<h2 class="anchor anchorWithStickyNavbar_JmGV" id=why-test>Why Test<a href=#why-test class=hash-link aria-label="Direct link to Why Test" title="Direct link to Why Test">​</a></h2> 8<p>We're humans, and humans make mistakes. Testing is important because it helps you uncover these mistakes and verifies that your code is working. Perhaps even more importantly, testing ensures that your code continues to work in the future as you add new features, refactor the existing ones, or upgrade major dependencies of your project.</p> 9<p>There is more value in testing than you might realize. One of the best ways to fix a bug in your code is to write a failing test that exposes it. Then when you fix the bug and re-run the test, if it passes it means the bug is fixed, never reintroduced into the code base.</p> 10<p>Tests can also serve as documentation for new people joining your team. For people who have never seen a codebase before, reading tests can help them understand how the existing code works.</p> 11<p>Last but not least, more automated testing means less time spent with manual <abbr title="Quality Assurance">QA</abbr>, freeing up valuable time.</p> 12<h2 class="anchor anchorWithStickyNavbar_JmGV" id=static-analysis>Static Analysis<a href=#static-analysis class=hash-link aria-label="Direct link to Static Analysis" title="Direct link to Static Analysis">​</a></h2> 13<p>The first step to improve your code quality is to start using static analysis tools. Static analysis checks your code for errors as you write it, but without running any of that code.</p> 14<ul> 15<li><strong>Linters</strong> analyze code to catch common errors such as unused code and to help avoid pitfalls, to flag style guide no-nos like using tabs instead of spaces (or vice versa, depending on your configuration).</li> 16<li><strong>Type checking</strong> ensures that the construct you’re passing to a function matches what the function was designed to accept, preventing passing a string to a counting function that expects a number, for instance.</li> 17</ul> 18<p>React Native comes with two such tools configured out of the box: <a href=https://eslint.org/ target=_blank rel="noopener noreferrer">ESLint</a> for linting and <a href=/docs/typescript>TypeScript</a> for type checking.</p> 19<h2 class="anchor anchorWithStickyNavbar_JmGV" id=writing-testable-code>Writing Testable Code<a href=#writing-testable-code class=hash-link aria-label="Direct link to Writing Testable Code" title="Direct link to Writing Testable Code">​</a></h2> 20<p>To start with tests, you first need to write code that is testable. Consider an aircraft manufacturing process - before any model first takes off to show that all of its complex systems work well together, individual parts are tested to guarantee they are safe and function correctly. For example, wings are tested by bending them under extreme load; engine parts are tested for their durability; the windshield is tested against simulated bird impact.</p> 21<p>Software is similar. Instead of writing your entire program in one huge file with many lines of code, you write your code in multiple small modules that you can test more thoroughly than if you tested the assembled whole. In this way, writing testable code is intertwined with writing clean, modular code.</p> 22<p>To make your app more testable, start by separating the view part of your app—your React components—from your business logic and app state (regardless of whether you use Redux, MobX or other solutions). This way, you can keep your business logic testing—which shouldn’t rely on your React components—independent of the components themselves, whose job is primarily rendering your app’s UI!</p> 23<p>Theoretically, you could go so far as to move all logic and data fetching out of your components. This way your components would be solely dedicated to rendering. Your state would be entirely independent of your components. Your app’s logic would work without any React components at all!</p> 24<blockquote> 25<p>We encourage you to further explore the topic of testable code in other learning resources.</p> 26</blockquote> 27<h2 class="anchor anchorWithStickyNavbar_JmGV" id=writing-tests>Writing Tests<a href=#writing-tests class=hash-link aria-label="Direct link to Writing Tests" title="Direct link to Writing Tests">​</a></h2> 28<p>After writing testable code, it’s time to write some actual tests! The default template of React Native ships with <a href=https://jestjs.io target=_blank rel="noopener noreferrer">Jest</a> testing framework. It includes a preset that's tailored to this environment so you can get productive without tweaking the configuration and mocks straight away—<a href=#mocking>more on mocks</a> shortly. You can use Jest to write all types of tests featured in this guide.</p> 29<blockquote> 30<p>If you do test-driven development, you actually write tests first! That way, testability of your code is given.</p> 31</blockquote> 32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=structuring-tests>Structuring Tests<a href=#structuring-tests class=hash-link aria-label="Direct link to Structuring Tests" title="Direct link to Structuring Tests">​</a></h3> 33<p>Your tests should be short and ideally test only one thing. Let's start with an example unit test written with Jest:</p> 34<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>it</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'given a date in the past, colorForDueDate() returns red'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>expect</span><span class="token punctuation" style=color:#657b83>(</span><span class="token function" style=color:#79b6f2>colorForDueDate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'2000-10-20'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>toBe</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'red'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 35<p>The test is described by the string passed to the <a href=https://jestjs.io/docs/en/api#testname-fn-timeout target=_blank rel="noopener noreferrer"><code>it</code></a> function. Take good care writing the description so that it’s clear what is being tested. Do your best to cover the following:</p> 36<ol> 37<li><strong>Given</strong> - some precondition</li> 38<li><strong>When</strong> - some action executed by the function that you’re testing</li> 39<li><strong>Then</strong> - the expected outcome</li> 40</ol> 41<p>This is also known as AAA (Arrange, Act, Assert).</p> 42<p>Jest offers <a href=https://jestjs.io/docs/en/api#describename-fn target=_blank rel="noopener noreferrer"><code>describe</code></a> function to help structure your tests. Use <code>describe</code> to group together all tests that belong to one functionality. Describes can be nested, if you need that. Other functions you'll commonly use are <a href=https://jestjs.io/docs/en/api#beforeeachfn-timeout target=_blank rel="noopener noreferrer"><code>beforeEach</code></a> or <a href=https://jestjs.io/docs/en/api#beforeallfn-timeout target=_blank rel="noopener noreferrer"><code>beforeAll</code></a> that you can use for setting up the objects you're testing. Read more in the <a href=https://jestjs.io/docs/en/api target=_blank rel="noopener noreferrer">Jest api reference</a>.</p> 43<p>If your test has many steps or many expectations, you probably want to split it into multiple smaller ones. Also, ensure that your tests are completely independent of one another. Each test in your suite must be executable on its own without first running some other test. Conversely, if you run all your tests together, the first test must not influence the output of the second one.</p> 44<p>Lastly, as developers we like when our code works great and doesn't crash. With tests, this is often the opposite. Think of a failed test as of a <em>good thing!</em> When a test fails, it often means something is not right. This gives you an opportunity to fix the problem before it impacts the users.</p> 45<h2 class="anchor anchorWithStickyNavbar_JmGV" id=unit-tests>Unit Tests<a href=#unit-tests class=hash-link aria-label="Direct link to Unit Tests" title="Direct link to Unit Tests">​</a></h2> 46<p>Unit tests cover the smallest parts of code, like individual functions or classes.</p> 47<p>When the object being tested has any dependencies, you’ll often need to mock them out, as described in the next paragraph.</p> 48<p>The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: <a href=https://jestjs.io/docs/en/cli#watch target=_blank rel="noopener noreferrer">Watch mode</a>.</p> 49<img src=/docs/assets/p_tests-unit.svg alt=" "> 50<h3 class="anchor anchorWithStickyNavbar_JmGV" id=mocking>Mocking<a href=#mocking class=hash-link aria-label="Direct link to Mocking" title="Direct link to Mocking">​</a></h3> 51<p>Sometimes, when your tested objects have external dependencies, you’ll want to “mock them out.” “Mocking” is when you replace some dependency of your code with your own implementation.</p> 52<blockquote> 53<p>Generally, using real objects in your tests is better than using mocks but there are situations where this is not possible. For example: when your JS unit test relies on a native module written in Java or Objective-C.</p> 54</blockquote> 55<p>Imagine you’re writing an app that shows the current weather in your city and you’re using some external service or other dependency that provides you with the weather information. If the service tells you that it’s raining, you want to show an image with a rainy cloud. You don’t want to call that service in your tests, because:</p> 56<ul> 57<li>It could make the tests slow and unstable (because of the network requests involved)</li> 58<li>The service may return different data every time you run the test</li> 59<li>Third party services can go offline when you really need to run tests!</li> 60</ul> 61<p>Therefore, you can provide a mock implementation of the service, effectively replacing thousands of lines of code and some internet-connected thermometers!</p> 62<blockquote> 63<p>Jest comes with <a href=https://jestjs.io/docs/en/mock-functions#mocking-modules target=_blank rel="noopener noreferrer">support for mocking</a> from function level all the way to module level mocking.</p> 64</blockquote> 65<h2 class="anchor anchorWithStickyNavbar_JmGV" id=integration-tests>Integration Tests<a href=#integration-tests class=hash-link aria-label="Direct link to Integration Tests" title="Direct link to Integration Tests">​</a></h2> 66<p>When writing larger software systems, individual pieces of it need to interact with each other. In unit testing, if your unit depends on another one, you’ll sometimes end up mocking the dependency, replacing it with a fake one.</p> 67<p>In integration testing, real individual units are combined (same as in your app) and tested together to ensure that their cooperation works as expected. This is not to say that mocking does not happen here: you’ll still need mocks (for example, to mock communication with a weather service), but you'll need them much less than in unit testing.</p> 68<blockquote> 69<p>Please note that the terminology around what integration testing means is not always consistent. Also, the line between what is a unit test and what is an integration test may not always be clear. For this guide, your test falls into "integration testing" if it:</p> 70<ul> 71<li>Combines several modules of your app as described above</li> 72<li>Uses an external system</li> 73<li>Makes a network call to other application (such as the weather service API)</li> 74<li>Does any kind of file or database <abbr title=Input/Output>I/O</abbr></li> 75</ul> 76</blockquote> 77<img src=/docs/assets/p_tests-integration.svg alt=" "> 78<h2 class="anchor anchorWithStickyNavbar_JmGV" id=component-tests>Component Tests<a href=#component-tests class=hash-link aria-label="Direct link to Component Tests" title="Direct link to Component Tests">​</a></h2> 79<p>React components are responsible for rendering your app, and users will directly interact with their output. Even if your app's business logic has high testing coverage and is correct, without component tests you may still deliver a broken UI to your users. Component tests could fall into both unit and integration testing, but because they are such a core part of React Native, we'll cover them separately.</p> 80<p>For testing React components, there are two things you may want to test:</p> 81<ul> 82<li>Interaction: to ensure the component behaves correctly when interacted with by a user (eg. when user presses a button)</li> 83<li>Rendering: to ensure the component render output used by React is correct (eg. the button's appearance and placement in the UI)</li> 84</ul> 85<p>For example, if you have a button that has an <code>onPress</code> listener, you want to test that the button both appears correctly and that tapping the button is correctly handled by the component.</p> 86<p>There are several libraries that can help you testing these:</p> 87<ul> 88<li>React’s <a href=https://reactjs.org/docs/test-renderer.html target=_blank rel="noopener noreferrer">Test Renderer</a>, developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.</li> 89<li><a href=https://callstack.github.io/react-native-testing-library/ target=_blank rel="noopener noreferrer">React Native Testing Library</a> builds on top of React’s test renderer and adds <code>fireEvent</code> and <code>query</code> APIs described in the next paragraph.</li> 90</ul> 91<blockquote> 92<p>Component tests are only JavaScript tests running in Node.js environment. They do <em>not</em> take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it.</p> 93</blockquote> 94<img src=/docs/assets/p_tests-component.svg alt=" "> 95<h3 class="anchor anchorWithStickyNavbar_JmGV" id=testing-user-interactions>Testing User Interactions<a href=#testing-user-interactions class=hash-link aria-label="Direct link to Testing User Interactions" title="Direct link to Testing User Interactions">​</a></h3> 96<p>Aside from rendering some UI, your components handle events like <code>onChangeText</code> for <code>TextInput</code> or <code>onPress</code> for <code>Button</code>. They may also contain other functions and event callbacks. Consider the following example:</p> 97<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>GroceryShoppingList</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">groceryItem</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setGroceryItem</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useState</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>''</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">items</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setItems</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token generic-function function" style=color:#79b6f2>useState</span><span class="token generic-function generic class-name operator" style=color:#fc929e>&lt;</span><span class="token generic-function generic class-name builtin" style=color:#2aa198>string</span><span class="token generic-function generic class-name punctuation" style=color:#657b83>[</span><span class="token generic-function generic class-name punctuation" style=color:#657b83>]</span><span class="token generic-function generic class-name operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> addNewItemToShoppingList </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useCallback</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setItems</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">groceryItem</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token spread operator" style=color:#fc929e>...</span><span class="token plain">items</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setGroceryItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>''</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">groceryItem</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> items</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TextInput</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>value</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>groceryItem</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>placeholder</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Enter grocery item</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>onChangeText</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>text </span><span class="token tag script language-javascript arrow operator" style=color:#fc929e>=></span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript function" style=color:#79b6f2>setGroceryItem</span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript" style=color:#fc929e>text</span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Button</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>title</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Add the item to list</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>addNewItemToShoppingList</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">items</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>map</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">item </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>key</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>item</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">item</span><span class="token punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 98<p>When testing user interactions, test the component from the user perspective—what's on the page? What changes when interacted with?</p> 99<p>As a rule of thumb, prefer using things users can see or hear:</p> 100<ul> 101<li>make assertions using rendered text or <a href=https://reactnative.dev/docs/accessibility#accessibility-properties target=_blank rel="noopener noreferrer">accessibility helpers</a></li> 102</ul> 103<p>Conversely, you should avoid:</p> 104<ul> 105<li>making assertions on component props or state</li> 106<li>testID queries</li> 107</ul> 108<p>Avoid testing implementation details like props or state—while such tests work, they are not oriented toward how users will interact with the component and tend to break by refactoring (for example when you'd like to rename some things or rewrite class component using hooks).</p> 109<blockquote> 110<p>React class components are especially prone to testing their implementation details such as internal state, props or event handlers. To avoid testing implementation details, prefer using function components with Hooks, which make relying on component internals <em>harder</em>.</p> 111</blockquote> 112<p>Component testing libraries such as <a href=https://callstack.github.io/react-native-testing-library/ target=_blank rel="noopener noreferrer">React Native Testing Library</a> facilitate writing user-centric tests by careful choice of provided APIs. The following example uses <code>fireEvent</code> methods <code>changeText</code> and <code>press</code> that simulate a user interacting with the component and a query function <code>getAllByText</code> that finds matching <code>Text</code> nodes in the rendered output.</p> 113<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>test</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'given empty GroceryShoppingList, user can add an item to it'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">getByPlaceholderText</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> getByText</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> getAllByText</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>render</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>GroceryShoppingList</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fireEvent</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>changeText</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getByPlaceholderText</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'Enter grocery item'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token string" style=color:#8dc891>'banana'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fireEvent</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>press</span><span class="token punctuation" style=color:#657b83>(</span><span class="token function" style=color:#79b6f2>getByText</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'Add the item to list'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> bananaElements </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getAllByText</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'banana'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>expect</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">bananaElements</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>toHaveLength</span><span class="token punctuation" style=color:#657b83>(</span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// expect 'banana' to be on the list</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 114<p>This example is not testing how some state changes when you call a function. It tests what happens when a user changes text in the <code>TextInput</code> and presses the <code>Button</code>!</p> 115<h3 class="anchor anchorWithStickyNavbar_JmGV" id=testing-rendered-output>Testing Rendered Output<a href=#testing-rendered-output class=hash-link aria-label="Direct link to Testing Rendered Output" title="Direct link to Testing Rendered Output">​</a></h3> 116<p><a href=https://jestjs.io/docs/en/snapshot-testing target=_blank rel="noopener noreferrer">Snapshot testing</a> is an advanced kind of testing enabled by Jest. It is a very powerful and low-level tool, so extra attention is advised when using it.</p> 117<p>A "component snapshot" is a JSX-like string created by a custom React serializer built into Jest. This serializer lets Jest translate React component trees to string that's human-readable. Put another way: a component snapshot is a textual representation of your component’s render output <em>generated</em> during a test run. It may look like this:</p> 118<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript known-class-name class-name" style=color:#fac863>Object</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string-property property" style=color:#2aa198>"fontSize"</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>20</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string-property property" style=color:#2aa198>"textAlign"</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>"center"</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Welcome to React Native!</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 119<p>With snapshot testing, you typically first implement your component and then run the snapshot test. The snapshot test then creates a snapshot and saves it to a file in your repo as a reference snapshot. <strong>The file is then committed and checked during code review</strong>. Any future changes to the component render output will change its snapshot, which will cause the test to fail. You then need to update the stored reference snapshot for the test to pass. That change again needs to be committed and reviewed.</p> 120<p>Snapshots have several weak points:</p> 121<ul> 122<li>For you as a developer or reviewer, it can be hard to tell whether a change in snapshot is intended or whether it's evidence of a bug. Especially large snapshots can quickly become hard to understand and their added value becomes low.</li> 123<li>When snapshot is created, at that point it is considered to be correct-even in the case when the rendered output is actually wrong.</li> 124<li>When a snapshot fails, it's tempting to update it using the <code>--updateSnapshot</code> jest option without taking proper care to investigate whether the change is expected. Certain developer discipline is thus needed.</li> 125</ul> 126<p>Snapshots themselves do not ensure that your component render logic is correct, they are merely good at guarding against unexpected changes and for checking that the components in the React tree under test receive the expected props (styles and etc.).</p> 127<p>We recommend that you only use small snapshots (see <a href=https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md target=_blank rel="noopener noreferrer"><code>no-large-snapshots</code> rule</a>). If you want to test a <em>change</em> between two React component states, use <a href=https://github.com/jest-community/snapshot-diff target=_blank rel="noopener noreferrer"><code>snapshot-diff</code></a>. When in doubt, prefer explicit expectations as described in the previous paragraph.</p> 128<img src=/docs/assets/p_tests-snapshot.svg alt=" "> 129<h2 class="anchor anchorWithStickyNavbar_JmGV" id=end-to-end-tests>End-to-End Tests<a href=#end-to-end-tests class=hash-link aria-label="Direct link to End-to-End Tests" title="Direct link to End-to-End Tests">​</a></h2> 130<p>In end-to-end (E2E) tests, you verify your app is working as expected on a device (or a simulator / emulator) from the user perspective.</p> 131<p>This is done by building your app in the release configuration and running the tests against it. In E2E tests, you no longer think about React components, React Native APIs, Redux stores or any business logic. That is not the purpose of E2E tests and those are not even accessible to you during E2E testing.</p> 132<p>Instead, E2E testing libraries allow you to find and control elements in the screen of your app: for example, you can <em>actually</em> tap buttons or insert text into <code>TextInputs</code> the same way a real user would. Then you can make assertions about whether or not a certain element exists in the app’s screen, whether or not it’s visible, what text it contains, and so on.</p> 133<p>E2E tests give you the highest possible confidence that part of your app is working. The tradeoffs include:</p> 134<ul> 135<li>writing them is more time consuming compared to the other types of tests</li> 136<li>they are slower to run</li> 137<li>they are more prone to flakiness (a "flaky" test is a test which randomly passes and fails without any change to code)</li> 138</ul> 139<p>Try to cover the vital parts of your app with E2E tests: authentication flow, core functionalities, payments, etc. Use faster JS tests for the non-vital parts of your app. The more tests you add, the higher your confidence, but also, the more time you'll spend maintaining and running them. Consider the tradeoffs and decide what's best for you.</p> 140<p>There are several E2E testing tools available: in the React Native community, <a href=https://github.com/wix/detox/ target=_blank rel="noopener noreferrer">Detox</a> is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is <a href=https://appium.io/ target=_blank rel="noopener noreferrer">Appium</a> or <a href=https://maestro.mobile.dev/ target=_blank rel="noopener noreferrer">Maestro</a>.</p> 141<img src=/docs/assets/p_tests-e2e.svg alt=" "> 142<h2 class="anchor anchorWithStickyNavbar_JmGV" id=summary>Summary<a href=#summary class=hash-link aria-label="Direct link to Summary" title="Direct link to Summary">​</a></h2> 143<p>We hope you enjoyed reading and learned something from this guide. There are many ways you can test your apps. It may be hard to decide what to use at first. However, we believe it all will make sense once you start adding tests to your awesome React Native app. So what are you waiting for? Get your coverage up!</p> 144<h3 class="anchor anchorWithStickyNavbar_JmGV" id=links>Links<a href=#links class=hash-link aria-label="Direct link to Links" title="Direct link to Links">​</a></h3> 145<ul> 146<li><a href=https://reactjs.org/docs/testing.html target=_blank rel="noopener noreferrer">React testing overview</a></li> 147<li><a href=https://callstack.github.io/react-native-testing-library/ target=_blank rel="noopener noreferrer">React Native Testing Library</a></li> 148<li><a href=https://jestjs.io/docs/en/tutorial-react-native target=_blank rel="noopener noreferrer">Jest docs</a></li> 149<li><a href=https://github.com/wix/detox/ target=_blank rel="noopener noreferrer">Detox</a></li> 150<li><a href=https://appium.io/ target=_blank rel="noopener noreferrer">Appium</a></li> 151<li><a href=https://maestro.mobile.dev/ target=_blank rel="noopener noreferrer">Maestro</a></li> 152</ul> 153<hr> 154<p><em>This guide originally authored and contributed in full by <a href=https://twitter.com/vonovak target=_blank rel="noopener noreferrer">Vojtech Novak</a>.</em></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/testing-overview.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/testing-overview.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/other-debugging-methods><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Other Debugging Methods</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/performance><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Performance Overview</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#why-test class="table-of-contents__link toc-highlight">Why Test</a><li><a href=#static-analysis class="table-of-contents__link toc-highlight">Static Analysis</a><li><a href=#writing-testable-code class="table-of-contents__link toc-highlight">Writing Testable Code</a><li><a href=#writing-tests class="table-of-contents__link toc-highlight">Writing Tests</a><ul><li><a href=#structuring-tests class="table-of-contents__link toc-highlight">Structuring Tests</a></ul><li><a href=#unit-tests class="table-of-contents__link toc-highlight">Unit Tests</a><ul><li><a href=#mocking class="table-of-contents__link toc-highlight">Mocking</a></ul><li><a href=#integration-tests class="table-of-contents__link toc-highlight">Integration Tests</a><li><a href=#component-tests class="table-of-contents__link toc-highlight">Component Tests</a><ul><li><a href=#testing-user-interactions class="table-of-contents__link toc-highlight">Testing User Interactions</a><li><a href=#testing-rendered-output class="table-of-contents__link toc-highlight">Testing Rendered Output</a></ul><li><a href=#end-to-end-tests class="table-of-contents__link toc-highlight">End-to-End Tests</a><li><a href=#summary class="table-of-contents__link toc-highlight">Summary</a><ul><li><a href=#links class="table-of-contents__link toc-highlight">Links</a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>