Testing React Native Apps with Jest

Writing First Test

Create a file snapshotIntro.js with the following code. A snapshot test for a short intro component with a few views and text components, as well as some styles, will be created:

Program

// snapshotIntro.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const docStyles = StyleSheet.create({
   mainDiv: {
       backgroundColor: '#A5C697',
       alignItems: 'center',
       justifyContent: 'center',
       flex: 1,
   },
   introStyle: {
       color: '#333333',
       marginBottom: 5,
       textAlign: 'center',
   },
   txtWlcm: {
       fontSize: 20,
       margin: 10,
       textAlign: 'center',
   },
});

export default class IntroSnapShot extends Component {
   render() {
       return (
           <View style={docStyles.mainDiv}>
               <Text style={docStyles.txtWlcm}>Welcome to React Native!</Text>
               <Text style={docStyles.introStyle}>
                   This is a React Native snapshot test.
               </Text>
           </View>
       );
   }
}

You can also try this code with Online Javascript Compiler

Run Code

Create a file snapshotIntroTest.js inside __tests__ folder to test the component we just created. We'll interact with the component using React's test renderer and Jest's snapshot failure to capture the rendered output and produce a snapshot file. To learn more about react-test-renderer, follow this article.

Program

// __tests__/snapshotIntro.test.js
import React from 'react';
import Intro from '../snapshotIntro';

import renderer from 'react-test-renderer';

test('Intro Snapshot renders correctly', () => {
   const treeObj = renderer.create(<IntroSnapShot />).toJSON();
   expect(treeObj).toMatchSnapshot();
});
Output
// __tests__/__snapshots__/Intro-test.js.snap
exports[`Intro renders correctly 1`] = `
<View
 style={
   Object {
     "alignItems": "center",
     "backgroundColor": "#A5C697",
     "flex": 1,
     "justifyContent": "center",
   }
 }>
 <Text
   style={
     Object {
       "fontSize": 20,
       "margin": 10,
       "textAlign": "center",
     }
   }>
   Hello React Native!
 </Text>
 <Text
   style={
     Object {
       "color": "#333333",
       "marginBottom": 5,
       "textAlign": "center",
     }
   }>
    A snapshot test for React Native.
 </Text>
</View>
`;

You can also try this code with Online Javascript Compiler

Run Code

The rendered output is compared to the previously prepared snapshot the next time you run the tests. Along with code modifications, the snapshot must be committed. If a snapshot test fails, you must determine if the change was intentional or unintended. In the event where a change is predicted, you can use jest -u to replace the previous snapshot.

FAQs

1. What is the purpose of Preset Configuration?
   The preset will create the setting, and it has a strong viewpoint. When no preset is used, all of the setup options can be overridden and changed.
    
2. How to specify specific configuration settings for every test file?
   You can supply setup scripts with the specify setup scripts command if you want to offer additional configuration for each test file.
    
3. What is the purpose of the Enzyme library and how is it better than react-test-renderer?
   Enzyme enables direct manipulation of our components' props and state, allowing us to build snapshots for different renders of the same component.
    
4. Why do we use Snapshots to test React Native components?
   Testing React Native components using snapshots has various advantages including easy to write, don’t repeat yourself, error messages on development time, etc.

Key Takeaways

In this blog, we discussed how to test React Native components using our good old friend jest. We saw how to use snapshots to test React Native components. We firstly learned how to set up Jest in a React Native project. We saw examples to further explain the process of testing React Native components to a much greater extent. 

Yet there is a lot to learn. You can next follow these articles to learn about mocking in jest - Manual Mocks and Mock Functions.

Happy Learning!