What are the steps for jest to test react native components?

This time I will bring you the steps for testing react native components with jest, and what are the precautions for testing react native components with jest. The following is a practical case, let's take a look.

There are many testing tools for

Javascript at present, but for 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 JavaScriptunit 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

Installing 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 us 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 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~

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to achieve the intermittent loop scrolling effect of JS text

JS adding new elements

The above is the detailed content of What are the steps for jest to test react native components?. For more information, please follow other related articles on the PHP Chinese website!