How to use jest to test react native components in the project

There are currently many Javascript testing tools, but for the React testing strategy, the standard testing tool for ReactJs launched by Facebook is Jest.Jest’s official website address: https://facebook.github.io/jest/. We can see that the Jest official website claims: Painless JavaScript Testing. Is Facebook's JavaScript unit testing framework for testing services and React applications. This article mainly introduces how to use jest to test react native components in the project, as a reference for everyone.

The so-called unit test is to test each unit. In popular terms, it generally targets functions, classes or individual components, and does not involve systems and integration. Unit testing is the basic test of software testing. Jest mainly has the following features:

1. Adaptability: Jest is modular, extensible and configurable.

2. Sandbox and fast: Jest virtualizes the JavaScript environment, can simulate the browser, and execute in parallel

3. Snapshot test: Jest can Quickly write tests on snapshots or other serialized values ​​of the React tree to provide a quickly updated user experience.

4. Support asynchronous code testing: support promises and async/await

5. Automatically generate static analysis results: not only display test case execution results, but also Statement, branch, function, etc. coverage.

Why use unit testing tools

During the development process, we can still write our own code for unit testing without using testing tools, but Our codes have a mutual calling relationship. During the testing process, we want to make the unit relatively independent and run normally. We need to mock the dependent functions and environment of the function under test, and perform test data input, test execution and There are many similarities in the inspection of test results, and testing tools provide us with convenience in these aspects.

Preparation stage

Requires an rn project. What is demonstrated here is my personal project ReactNative-ReduxSaga-TODO

Install jest

If you created the rn project using the react-native init command line, and your rn version is above 0.38, there is no need to install it. If you are not sure, check whether the

package.json file contains the following code:

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

If not, install npm i jest --save-dev, and add the above code to the corresponding location of the package.json file.

After completing the above steps, simply run npm run test to test whether jest is configured successfully. But we did not write a test case, and the terminal will print no tests found. The configuration is now complete.

Snapshot test

Write a component

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

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: &#39;#ddd&#39;, height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

Find __test_ in the project root directory _ folder, Now, let’s use React’s test renderer and Jest’s snapshot functionality to interact with the component and capture the rendered output and create a snapshot file.

// PostArea_test.js
import 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

Then run npm run test or jest in the terminal. Will output:

PASS __tests__\PostArea_test.js (6.657s)
√ renders correctly (5553ms)

› 1 snapshot written.
Snapshot Summary
› 1 snapshot written in 1 test suite.

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 added, 1 total
Time: 8.198 s
Ran all test suites.

At the same time, a file will be output in the test folder, which is the generated snapshot.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

Modify the source file

The next time you run the test, the rendered output will be compared to the previously created snapshot. Snapshots should be submitted together with the code. When a snapshot test fails, it needs to be checked for intentional or unintentional changes. If the changes are as expected, call jest -u to overwrite the current snapshot.

Let’s change the original code: change the font size of the second line to 14.

##

<Text style={{ fontSize: 14, color }}>{text}</Text>

At this time, we run again jest. At this time, the terminal will throw an error and point out the error location

Because this code was intentionally changed by us, then run jest -u, snapshot is covered. If you execute jest again, no error will be reported~

Related recommendations:

React Native custom component to implement the drawer menu control effect

About the communication between react native and webview

Detailed encapsulation of React Native vertical carousel component

The above is the detailed content of How to use jest to test react native components in the project. For more information, please follow other related articles on the PHP Chinese website!