關於jest對react元件的測試(主要是使用的hooks)
阿新 • • 發佈：2020-07-27
1 寫這篇文章的時候真的是一言難盡,客戶要求程式碼覆蓋率,之前基本沒搞過,只聽說了一點點.中間踩了無數的坑,在寫這篇的時候還有一些警告沒有解決或者一些的程式碼片段沒有覆蓋到,但也基本滿足客戶需求了.
2https://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的檔案.總結就是一句話,缺什麼裝什麼.下面是我的配置,供參考:
"usestrict";
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
importReactfrom'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一下.也是看執行結果給你的提示是什麼,到目前為止我們的環境準備基本完成.