Home > Article > WeChat Applet > 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 forJavascript 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: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-TODOInstalling jestIf 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 componentimport 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 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)At the same time, a file will be output in the test folder, which is the generated snapshot.√ renders correctly (5553ms)
› 1 snapshot written.Snapshot Summary
Test Suites: 1 passed, 1 total
› 1 snapshot written in 1 test suite.Tests: 1 passed, 1 total
Snapshots: 1 added, 1 total
Time: 8.198 s
Ran all test suites.
// 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<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
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!