React Native单元测试

  • Z时代
  • 2024-01-10
  • 分类：综合

react

参考文章：https://blog.csdn.net/xiangzhihong8/article/details/83547346

配置Babel

yarn add --dev babel-jest babel-core regenerator-runtime

完整配置

为了方便查看， 下面是package.json文件的完整配置：

{
  "name": "jest_enzyme",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.8"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.0",
    "react-test-renderer": "16.8.3",
    "regenerator-runtime": "^0.13.2"
  },
 "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native)/)"
    ]
  }
}

Jest单元测试

简单示例

1.在根目录的_test_文件夹下编写一个名为jest.test.js的文件：

import React from 'react';
import JestTest from'../android/app/src/jest/JestTest';
import renderer from 'react-test-renderer';
test('renders correctly', () => {
    const tree = renderer.create(<JestTest/>).toJSON();
    expect(tree).toMatchSnapshot();
});

2.在/android/app/src/文件夹下新建一个jest文件夹存放测试用例，然后在jest文件夹中创建的文件JestTest.js:

import React, {Component} from 'react';
import {
    Text, View,
} from 'react-native';
export default class JestTest extends Component{
    render() {
        return(<View />)
    }
}

使用命令 “yarn jest” ，系统就会开始执行单元测试，如果没有任何错误，将会显示PASS相关的信息。

以上是 React Native单元测试 的全部内容， 来源链接： utcz.com/z/382460.html

回到顶部