在Vue项目中添加单元测试
搭建基于jest的vue的单元测试环境
jest中文文档 jest 包含了 karma + mocha + chai + sinon 的所有常用功能,零配置开箱即用
安装依赖
npm install jest vue-jest babel-jest @vue/test-utils -D
jest配置文件
// ./test/unit/jest.conf.js
const path = require('path');
module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue', // 告诉 Jest 处理 `*.vue` 文件
],
moduleNameMapper: {
// 把@设置为/src的别名
'^@/(.*)$': '<rootDir>/src/$1',
},
transform: {
// 用 `babel-jest` 处理 `*.js` 文件
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
// 用 `vue-jest` 处理 `*.vue` 文件
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
},
setupFiles: ['<rootDir>/test/unit/setup'],
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**',
],
};
启动文件setup.js
// ./test/unit/setup.js
import Vue from 'vue';
Vue.config.productionTip = false;
添加jest启动脚本
"scripts": {
"unit": "jest --config test/unit/jest.conf.js --coverage",
},
编写测试文件
// ./src/components/hello-world/HelloWorld.vue
<template>
<div>
<h1 id="title">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Jest',
};
},
};
</script>
// ./src/components/hello-world/HelloWorld.spec.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from './HelloWorld';
describe('<hello-world/>', () => {
it('should render correct contents', () => {
const wrapper = shallowMount(HelloWorld);
expect(wrapper.find('#title').text())
.toEqual('Vue.js App');
});
});
默认情况下,Jest 测试文件扩展名为 .spec.js
或 .test.js
启动测试
npm run unit
jest 会自动扫描项目目录下所有文件名以 .spec.js或.test.js 结尾的测试文件,并执行测试用例。