1 写这篇文章的时候真的是一言难尽,客户要求代码覆盖率,之前基本没搞过,只听说了一点点.中间踩了无数的坑,在写这篇的时候还有一些警告没有解决或者一些的代码片段没有覆盖到,但也基本满足客户需求了.
2 https://jestjs.io/docs/en/tutorial-react jest官网,必看.
https://classic.yarnpkg.com/zh-Hans/docs/install/#windows-stable
yarn可以安装一下,windows版本的
3 从官网上面我们可以看到他给出的两种情况,一种是脚手架create-react-app搭建的项目,一种是不用脚手架搭建的.我们这个项目是用了的,所以只需要安装一下yarn add --dev react-test-renderer
4 执行
jest --init
回答上面四个问题,结束后会生成一个配置文件
5 大概率会遇到语法转化问题,所以babel一系列的需要配置起来,在根目录下新建一个叫babel.config.js的文件.总结就是一句话,缺什么装什么.下面是我的配置,供参考:
"use strict";
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties', ["@babel/plugin-transform-runtime",
{
"regenerator": true
}
]]
};
6 实际开始写测试用例
https://enzymejs.github.io/enzyme/docs/installation/react-16.html
一个很好用的库,安装
根目录下面新建test.setup.js,在jest.config.js里面配置
setupFilesAfterEnv: ['<rootDir>/test.setup.js'],
test.setup.js
import React from 'react';
React.useLayoutEffect = React.useEffect
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import jsdom from 'jsdom'
// import chaiEnzyme from 'chai-enzyme'
const url = 'http://localhost';
const { window } = new jsdom.JSDOM('<!doctype html><html><body></body></html>', { url })
global.window = window
global.document = window.document
global.localStorage = window.localStorage
global.navigator = window.navigator
global.Blob = window.Blob
global.location = window.location
Enzyme.configure({ adapter: new Adapter() })
下面放一些依赖和我使用的版本吧
package.json
{
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.10.3",
"@date-io/date-fns": "^1.3.11",
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.54",
"@material-ui/pickers": "^3.2.6",
"@material-ui/styles": "^4.3.0",
"apexcharts": "^3.8.3",
"bootstrap": "^4.4.1",
"chai": "^4.2.0",
"chai-enzyme": "^1.0.0-beta.1",
"classnames": "^2.2.6",
"clsx": "^1.0.4",
"date-fns": "^2.2.1",
"env-cmd": "^10.0.1",
"font-awesome": "^4.7.0",
"material-table": "^1.59.0",
"moment": "^2.24.0",
"mui-datatables": "^2.11.1",
"papaparse": "^5.1.0",
"query-string": "^6.8.3",
"react": "16.9.0",
"react-apexcharts": "^1.3.3",
"react-bootstrap": "^1.0.0",
"react-csv": "^2.0.3",
"react-dom": "16.9.0",
"react-dropzone": "^10.1.9",
"react-google-maps": "^9.4.5",
"react-router-dom": "^5.0.1",
"react-scripts": "3.4.1",
"react-select": "^3.0.5",
"react-syntax-highlighter": "^11.0.2",
"react-toastify": "^5.3.2",
"recharts": "^1.7.1",
"tinycolor2": "^1.4.1",
"wangeditor": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "set RUN_TEST=test&&jest --verbose -u --coverage",
"eject": "react-scripts eject",
"start:dev": "env-cmd -f .env.development npm run start",
"build:dev": "env-cmd -f .env.development npm run build",
"build:uat": "env-cmd -f .env.uat npm run build",
"build:ci": "env-cmd -f .env.ci npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.2",
"@babel/plugin-transform-runtime": "^7.10.3",
"@testing-library/react": "^10.4.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest-html-reporters": "^2.0.1",
"jsdom": "^16.2.2",
"react-test-renderer": "^16.13.1"
}
}
安装完毕如有报错,可以yarn upgrade一下.也是看执行结果给你的提示是什么,到目前为止我们的环境准备基本完成.
