Home > Article > Web Front-end > 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:
Adaptability: Jest is modular, extensible and configurable.
Sandbox and fast: Jest virtualizes the JavaScript environment, can simulate the browser, and execute in parallel
Snapshot test: Jest can Quickly write tests on snapshots or other serialized values of the React tree to provide a quickly updated user experience.
Support asynchronous code testing: support promises and async/await
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: '#ddd', 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 7afbc23223af17d69e2ad2a4e42c6248 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
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!