自动化测试(四)05-js测试框架Jest——Jest在React、Vue项目中的应用
在create-react-app
中的应用:
安装对应的依赖:
npm install react-test-renderer enzyme enzyme-adapter-react-16
Enzyme是一个非常棒的React组件测试测试库。
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal
需要注意的两点是:
- 需要配置Adapter,不同的React的Adapter不同
Enzyme Adapter Package | React semver compatibility |
---|---|
enzyme-adapter-react-16 | ^16.4.0-0 |
enzyme-adapter-react-16.3 | ~16.3.0-0 |
enzyme-adapter-react-16.2 | ~16.2 |
enzyme-adapter-react-16.1 | ~16.0.0-0 || ~16.1 |
enzyme-adapter-react-15 | ^15.5.0 |
enzyme-adapter-react-15.4 | 15.0.0-0 - 15.4.x |
enzyme-adapter-react-14 | ^0.14.0 |
enzyme-adapter-react-13 | ^0.13.0 |
-
需要初始化配置
setUpTests.js
官方文档在Package.json中设置jest配置,已经过时,Jest框架最新会默认加载文件
src/setUpTests.js
-
import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16' configure({ adapter: new Adapter() })
在vue工程化项目中:
"devDependencies": {
"@vue/cli-plugin-unit-jest": "^3.9.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-preset-env": "^1.7.0",
},
添加如上依赖,
配置scripts:
"scripts": {
"test": "vue-cli-service test:unit"
},
配置jest.config.js
module.exports = {
// 处理vue结尾的文件
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
// es6转义
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
// cli配置了webpack别名
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
]
}