Detailed explanation of using jest to test react native components

This article mainly introduces in detail how to use jest to test react native components in the project. Now I will share it with you and give you a reference.

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.

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

Installation 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 the __test__ folder in the project root directory. 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.198s
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 source files

The next time the test is run, 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 jest again. At this time, the terminal will throw an error and point out the error location

#Because this code was intentionally changed by us, when we run jest -u, the snapshot will be overwritten. If you execute jest again, no error will be reported~

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use parent component to pass value to child component in vue-prop

In Node.js Use cheerio to make a simple web crawler (detailed tutorial)

How to implement parent components to pass multiple data to child components in vue

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