环境准备
安装Jest
npm install --save-dev jest@26.6.3
安装vue-jest
如需要支持vue文件，则安装
npm install --save-dev vue-jest@4.0.1
配置Jest代码编译
package.json加入以下内容
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
Babel配置
babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env', {targets: {node: 'current'}}
]
]
}
项目配置测试脚本
package.json的scripts中加入以下内容
"scripts": {
"test": "jest"
}
单元测试
准备被测试函数
index.js
export default {
getUrlQueryParameter(url, name) {
const queryParameterString = url.split('?').length === 2 ? url.split('?')[1].split('#')[0] : ''
const queryParameterArray = queryParameterString.split('&')
for (const queryParameter of queryParameterArray) {
const queryParameterSplit = queryParameter.split('=')
if (queryParameterSplit.length === 2 && queryParameterSplit[0] === name) {
return queryParameterSplit[1]
}
}
return undefined
}
}
编写测试代码
index.test.js
import utils from "@/utils/language-trainer"
describe('Unit Test: utils.getUrlQueryParameter', () => {
test('test getUrlQueryParameter, normal case', () => {
expect(utils.getUrlQueryParameter('http://localhost:8081/?code=a&state=b#/', 'code')).toBe('a')
expect(utils.getUrlQueryParameter('http://localhost:8081/?code=a&state=b#/', 'state')).toBe('b')
})
})
运行测试
npm run test
识别配置
WebStorm
安装@types/jest
npm install -g @types/jest
ESLint
package.json的env中加入以下内容
"eslintConfig": {
"env": {
"jest": true
}
}