React Native is one of the most used frameworks for cross-platform mobile development. As the app grows, testing becomes crucial to keep the stability. It’s essential to ensure that the features we add don&#8217;t break other parts of the app.
<h2>Why should we test?</h2>
It’s hard to release a fix bugs on mobile apps later, due to app reviews taking a long time. For those who are frustrated with the review process, have an article with tips on how to avoid rejections: https://appcircle.io/blog/app-store-review-tips-how-to-get-along-well-with-apple-and-avoid-app-rejections/
Benefits of testing on mobile apps are:
<ul>
<li>Well-tested apps can easily add new features. You know early if some other part breaks.</li>
<li>Helps you to understand the purpose of your code. While writing tests, you also think what can go wrong and develop accordingly.</li>
<li>Maintainable code. Dividing your code into small units will create more maintainable code.</li>
<li>Get ready for dependencies breaking after an OS update.</li>
</ul>
<h3>Types of Tests</h3>
<ul>
<li>Unit Test</li>
<li>Integration</li>
<li>End to End(E2E)</li>
</ul>
We’ll cover all the test types in React Native development. Let’s start with a sample app.
<h2>Sample React Native App</h2>
You can find the source code located here: <a href="https://github.com/appcircleio/appcircle-sample-react-native">Appcircle&#8217;s React Native Sample App</a>
1. Fork the repository
Go to <a href="https://github.com/appcircleio/appcircle-sample-react-native">https://github.com/appcircleio/appcircle-sample-react-native</a> and hit Fork button to fork this repository to your Github account.
2. Connect it to Appcircle
The first step is getting started with Appcircle. Just go to <a href="https://appcircle.io/start">https://appcircle.io/start</a> and register.
3. Create a build profile by clicking Build, Build Profiles and then clicking &#8220;Add New&#8221;
<img class="alignnone size-full wp-image-2301" src="https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1.png" alt="Step 1: Add a Build Profile" width="2646" height="1470" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1.png 2646w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-300x167.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-1030x572.png 1030w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-768x427.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-1536x853.png 1536w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-2048x1138.png 2048w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-1500x833.png 1500w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step1-705x392.png 705w" sizes="(max-width: 2646px) 100vw, 2646px" />
4. Fill in the details of your build profile
<img class="alignnone size-full wp-image-2302" src="https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2.png" alt="Step 2: Add a Build Profile" width="1496" height="1194" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2.png 1496w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2-300x239.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2-1030x822.png 1030w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2-768x613.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/add-build-profile-step2-705x563.png 705w" sizes="(max-width: 1496px) 100vw, 1496px" />
5. Click your newly created build profile and connect your repository.
<img class="alignnone size-full wp-image-2303" src="https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories.png" alt="" width="1230" height="1332" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories.png 1230w, https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories-277x300.png 277w, https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories-951x1030.png 951w, https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories-768x832.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/get-repositories-651x705.png 651w" sizes="(max-width: 1230px) 100vw, 1230px" />
6. Give access to Appcircle and fetch your forked repository
<img class="alignnone size-full wp-image-2304" src="https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import.png" alt="Import Your Repository" width="1300" height="1056" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import.png 1300w, https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import-300x244.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import-1030x837.png 1030w, https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import-768x624.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/repo-import-705x573.png 705w" sizes="(max-width: 1300px) 100vw, 1300px" />
7. You should see all the branches and commits in this repository.
Our repository is now connected to Appcircle.
<h3>Preparations</h3>
We will clone this repository to our machine and write our tests.
1. Clone the repository to your machine
<pre><code class="language-bash">git clone https://github.com/[YOUR_GITHUB_USERNAME]/appcircle-sample-react-native</code></pre>
2. Open your terminal and go to the <code>cd</code> to application directory and install the dependencies
<pre><code class="language-">cd appcircle-sample-react-native
npm i 
npx pod-install ios</code></pre>
The above commands will download a bunch of dependencies and set up your project. This process will create both Android and iOS projects. In this blog post, we will focus on the iOS project.
3. Next, we will run our project
<pre><code class="language-bash">npx react-native run-ios</code></pre>
If everything works, you will see the following default React Native template
<img class="alignnone size-full wp-image-2305" src="https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen.png" alt="" width="1170" height="2532" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen.png 1170w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-139x300.png 139w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-476x1030.png 476w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-768x1662.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-710x1536.png 710w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-946x2048.png 946w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-693x1500.png 693w, https://ac.appcircle.io/wp-content/uploads/2021/11/firstscreen-326x705.png 326w" sizes="(max-width: 1170px) 100vw, 1170px" />
It is time to create our tests.
<h3>Catching Bugs Early On</h3>
Before writing tests, we can also prevent most of the bugs by using linter and TypeScript. This project uses ESLint. If you type
<pre><code class="language-bash">npm run lint</code></pre>
You will see that it doesn&#8217;t show any warnings or errors. If you&#8217;re using VS Code, you can install the ESLint extension to display and fix the problems.
Now we can write our tests.
<h3>Writing Tests</h3>
React Native comes with <code>Jest</code> and <code>react-test-renderer</code>. If you open your <code>__tests__</code> folder you will see your test files. Default test is very basic and only checks whether the app is rendered correctly.
<pre><code class="language-javascript">import &#039;react-native&#039;; 
import React from &#039;react&#039;; 
import App from &#039;../App&#039;; 

// Note: test renderer must be required after react-native. 
import renderer from &#039;react-test-renderer&#039;; 

it(&#039;renders correctly&#039;, () =&gt; { 
 renderer.create(&lt;App /&gt;);
});</code></pre>
Let&#8217;s run the tests to check. Issue the following command
<pre><code class="language-bash">npm test</code></pre>
<img class="alignnone size-full wp-image-2307" src="https://ac.appcircle.io/wp-content/uploads/2021/11/first-test.png" alt="" width="678" height="366" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/first-test.png 678w, https://ac.appcircle.io/wp-content/uploads/2021/11/first-test-300x162.png 300w" sizes="(max-width: 678px) 100vw, 678px" />
Our test passed and we got the green checkmark!
We will create our first test and add it to our project. When you&#8217;re creating tests, you import the components you&#8217;re going to test and write test scenarios. Let&#8217;s test our first component.
<h3>Snapshot Testing</h3>
Snapshots tests ensure your components’ UI don&#8217;t change unexpectedly. These tests render a component, take a snapshot, and then compare it to the previous snapshot. For components that use dynamic data, we need to provide static models / data to make tests fail only if there is a change in UI.
Create a file <code>__tests__/homescreen-test.js</code>
<pre><code class="language-javascript">import &#039;react-native&#039;; 
import React from &#039;react&#039;; 
import HomeScreen from &#039;../components/homescreen&#039;; 
import renderer from &#039;react-test-renderer&#039;; 

it(&#039;renders correctly&#039;, () =&gt; { 
 const home = renderer.create(&lt;HomeScreen /&gt;); 
 expect(home).toMatchSnapshot(); 
});</code></pre>
If we issue the following command in the project folder, we can see the result of our new tests.
<pre><code class="language-bash">npm test</code></pre>
<img class="alignnone size-full wp-image-2308" src="https://ac.appcircle.io/wp-content/uploads/2021/11/homescreen-test.png" alt="" width="684" height="472" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/homescreen-test.png 684w, https://ac.appcircle.io/wp-content/uploads/2021/11/homescreen-test-300x207.png 300w" sizes="(max-width: 684px) 100vw, 684px" />
This test is slightly different than the previous one. We also create and check the snapshot after we render the component. When the tests are finished, you will have a <code>__snapshots__</code> folder. This folder will have human readable snapshots of the components in JSON format.
Next tests will use the snapshots from this folder and check if the component is modified. Let&#8217;s see how this works. Let’s change our component slightly and see what happens. Edit <code>homescreen.js</code> and add <code>!</code> after the <code>Appcircle.io</code> and run the tests again.
<img class="alignnone size-full wp-image-2309" src="https://ac.appcircle.io/wp-content/uploads/2021/11/test1-failed.png" alt="" width="682" height="638" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/test1-failed.png 682w, https://ac.appcircle.io/wp-content/uploads/2021/11/test1-failed-300x281.png 300w" sizes="(max-width: 682px) 100vw, 682px" />
The test is failed because our snapshot doesn&#8217;t match the new component. Use snapshot tests to ensure your UI doesn’t break after a change. Provide static data to prevent tests from failing due to data change.
<h3>Unit Testing</h3>
We can also test the functionality of our components by using Unit Tests. In our app, if we click the &#8220;Next&#8221; button, we see our details screen component. It has basic text input and a Login button. The login button is only enabled if the entered text is a valid email.
Since this test requires user input, we will use another library for our test, <code>@testing-library/react-native</code>
Create a file <code>__tests__/detailsscreen-test.js</code>
<pre><code class="language-javascript">import &#039;react-native&#039;; 
import React from &#039;react&#039;; 
import DetailsScreen from &#039;../components/detailsscreen&#039;; 
import {fireEvent, render} from &#039;@testing-library/react-native&#039;; 

it(&#039;should only accept correct email&#039;, () =&gt; { 
 const {getByTestId, getByText} = render(&lt;DetailsScreen /&gt;); 
 const input = getByTestId(&#039;email&#039;); 
 const button = getByText(&#039;Login&#039;); 
 
 // Login button starts as disabled 
 expect(button.props.disabled).toBe(true); 
 fireEvent.changeText(input, &#039;invalid email&#039;); 
 
 // Email is invalid, button is disabled 
 expect(button.props.disabled).toBe(true); 
 fireEvent.changeText(input, &#039;some@email.com&#039;); 
 
 // Email is valid, button is enabled 
 expect(button.props.disabled).toBe(false); 
});</code></pre>
First, we render our component. Then we find our email input and login button with their <code>testID</code> and their text content. Using <code>testID</code> is a better way to find your elements. Since text content may change frequently. After we find our components, we check the state of our button after different events.
if we run our tests again
<pre><code class="language-bash">npm test</code></pre>
<img class="alignnone size-full wp-image-2310" src="https://ac.appcircle.io/wp-content/uploads/2021/11/final-test.png" alt="" width="672" height="392" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/final-test.png 672w, https://ac.appcircle.io/wp-content/uploads/2021/11/final-test-300x175.png 300w" sizes="(max-width: 672px) 100vw, 672px" />
As the app grows, there would be more tests and it would be hard to test every commit on our local machines. Appcircle can ease this process.
<h2>Automate Tests</h2>
Wouldn&#8217;t be nice to do these tests automatically for every commit?
<h3>Linting and Testing Our Code</h3>
Let&#8217;s add a new workflow just to test our code. Head over to workflows and a new Workflow and name it to anything you want. Since we&#8217;re just testing our code, we don&#8217;t need to build apk or sign it, we can remove some steps from the default workflow.
We will add two steps after the npm install step.
1. Linter
<img class="alignnone size-full wp-image-2311" src="https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf.png" alt="" width="1210" height="1448" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf.png 1210w, https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf-251x300.png 251w, https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf-861x1030.png 861w, https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf-768x919.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/linter-wf-589x705.png 589w" sizes="(max-width: 1210px) 100vw, 1210px" />
2. Testing
<img class="alignnone size-full wp-image-2312" src="https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf.png" alt="" width="1212" height="1438" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf.png 1212w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf-253x300.png 253w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf-868x1030.png 868w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf-768x911.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-wf-594x705.png 594w" sizes="(max-width: 1212px) 100vw, 1212px" />
The final workflow will look like below
<img class="alignnone size-full wp-image-2313" src="https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf.png" alt="" width="1202" height="1352" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf.png 1202w, https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf-267x300.png 267w, https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf-916x1030.png 916w, https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf-768x864.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/final-wf-627x705.png 627w" sizes="(max-width: 1202px) 100vw, 1202px" />
We can check our workflow by clicking the &#8220;Build&#8221; button and then selecting &#8220;Test Workflow&#8221;
<img class="alignnone size-full wp-image-2315" src="https://ac.appcircle.io/wp-content/uploads/2021/11/build-button.png" alt="" width="1566" height="570" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/build-button.png 1566w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-300x109.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-1030x375.png 1030w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-768x280.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-1536x559.png 1536w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-1500x546.png 1500w, https://ac.appcircle.io/wp-content/uploads/2021/11/build-button-705x257.png 705w" sizes="(max-width: 1566px) 100vw, 1566px" />
<img class="alignnone size-full wp-image-2314" src="https://ac.appcircle.io/wp-content/uploads/2021/11/select-wf.png" alt="" width="1004" height="644" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/select-wf.png 1004w, https://ac.appcircle.io/wp-content/uploads/2021/11/select-wf-300x192.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/select-wf-768x493.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/select-wf-705x452.png 705w" sizes="(max-width: 1004px) 100vw, 1004px" />
We will have nice green checkmarks after the build process.
<img class="alignnone size-full wp-image-2316" src="https://ac.appcircle.io/wp-content/uploads/2021/11/testing-done.png" alt="" width="694" height="670" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/testing-done.png 694w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-done-300x290.png 300w, https://ac.appcircle.io/wp-content/uploads/2021/11/testing-done-36x36.png 36w" sizes="(max-width: 694px) 100vw, 694px" />
This is a manual way of testing our code. We can automate this by using Triggers. For more information about triggers, check our docs: 
<a href="https://docs.appcircle.io/build/build-manually-or-with-triggers">https://docs.appcircle.io/build/build-manually-or-with-triggers</a>
Open triggers and change it like below and hit Save.
<img class="alignnone size-full wp-image-2317" src="https://ac.appcircle.io/wp-content/uploads/2021/11/trigger.png" alt="" width="1214" height="1492" srcset="https://ac.appcircle.io/wp-content/uploads/2021/11/trigger.png 1214w, https://ac.appcircle.io/wp-content/uploads/2021/11/trigger-244x300.png 244w, https://ac.appcircle.io/wp-content/uploads/2021/11/trigger-838x1030.png 838w, https://ac.appcircle.io/wp-content/uploads/2021/11/trigger-768x944.png 768w, https://ac.appcircle.io/wp-content/uploads/2021/11/trigger-574x705.png 574w" sizes="(max-width: 1214px) 100vw, 1214px" />
From now on, anything you push to <code>dev</code> branch will be tested automatically.
You can have multiple triggers for different scenarios. Triggers are very flexible can run different workflows one after the other.
<h2>Where to go from here?</h2>
To learn more and dive deeper into testing in React Native, check out the official docs of the projects mentioned here:
<a href="https://reactnative.dev/docs/testing-overview">https://reactnative.dev/docs/testing-overview</a>
<a href="https://jestjs.io/docs/tutorial-react-native">https://jestjs.io/docs/tutorial-react-native</a>
<a href="https://callstack.github.io/react-native-testing-library/">https://callstack.github.io/react-native-testing-library/</a>

Introduction to Testing React Native Apps

Related Posts

Streamline Registration of Apple Devices and Ad-Hoc Distribution with Appcircle

Increase Mobile Development Productivity by AI-Powered Appcircle

Firebase App Distribution vs Appcircle Test Distribution

Is GitLab a Good Fit for Mobile CI/CD?

Introduction to Testing React Native Apps

Related Posts

Streamline Registration of Apple Devices and Ad-Hoc Distribution with Appcircle

Increase Mobile Development Productivity by AI-Powered Appcircle

Firebase App Distribution vs Appcircle Test Distribution

Is GitLab a Good Fit for Mobile CI/CD?

Subscribe to Appcircle Circle