Snapshot Testing in React Native: A Comprehensive Guide with Jest

In this guide, we will delve into the world of snapshot testing in React Native going through, first, an overview of the Jest framework and then, how snapshot testing can be incorporated in your React Native application.

Using Jest for Testing in React Native

Jest is a very common testing library when it comes to React and React-Native due to its simplicity and the integrated snapshot testing feature. In order to initialize jest in your project, you can use react-native init. This will setup your test script and jest preset in your package.json as seen below.

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }
}

To test if Jest has been correctly set up, simply run yarn test. Jest should run and pass without any tests.

Snapshot Testing in Action

Snapshot tests are a very useful characteristic when you want to make sure your UI does not change unexpectedly. A snapshot test will capture a snapshot of your component and compares it to a reference snapshot file stored alongside your tests. Let’s illustrate this with a Intro component.

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component{
  render(){
    return(
      <View style={styles.container}>
          <Text style={styles.welcome}> Welcome to React Native!</Text>
          <Text style={styles.instructions}>This is a React Native snapshot test.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex: 1,
    justifyContent: 'center',
  },
  instructions: {
    color: '#333333',
    marginBottom: 5,
    textAlign: 'center',
  },
  welcome: {
    fontSize: 20,
    margin: 10,
    textAlign: 'center',
  },
});

export default Intro;

To create the snapshot for this component, we will make use of React’s test renderer and Jest’s snapshot feature. We will build a generic test that will render our component and compare it with the snapshot.

import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test('renders correctly', () => {
    const tree = renderer.create(<Intro/>).toJSON();
    expect(tree).toMatchSnapshot();
});

We run this test with yarn test. Jest will then create a snapshot file which records the current state of the component. The snapshot file would look like something as below.

exports[`Intro renders correctly 1`] = `
<View style={ { "alignItems": "center", "backgroundColor": "#F5FCFF", "flex": 1, "justifyContent": "center", }}>
  <Text style={ { "fontSize": 20, "margin": 10, "textAlign": "center", }}>Welcome to React Native!</Text>
  <Text style={ { "color": "#333333", "marginBottom": 5, "textAlign": "center", }}>This is a React Native snapshot test.</Text>
</View>
`;

Congratulations! You have now created your first snapshot test. Every subsequent run of the test will compare the rendered output with this snapshot. If the output is different, the test will fail.

To update the snapshot, you can use the -u flag as jest -u.

Conclusion

In this guide, we took a dive into snapshot testing in React Native with Jest. Snapshot tests provide a great way to ensure your UI does not change unexpectedly, further ensuring the stability of your application.

However, snapshot testing does not replace good old unit testing. These tests should be seen as an additional layer to validate your application’s UI logic.

Using Jest for Testing in React Native

Snapshot Testing in Action

Conclusion

Tags