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一下.也是看執行結果給你的提示是什么,到目前為止我們的環境准備基本完成.
