vue 单元测试
vue unit_test
jest
参考官网说明 https://vue-test-utils.vuejs.org/zh/installation/
1.浏览器环境
npm install --save-dev jsdom jsdom-global
// 在测试的设置 / 入口中 (这一句是错的,不用管他)
require('jsdom-global')()
2.我们要做的第一件事就是安装 Jest 和 Vue Test Utils:
npm install --save-dev jest @vue/test-utils
3.然后我们需要在 package.json
中定义一个单元测试的脚本。
// package.json
{
"scripts": {
"test": "jest"
}
}
4.为了告诉 Jest 如何处理 *.vue
文件,我们需要安装和配置 vue-jest
预处理器:
npm install --save-dev vue-jest
接下来在 package.json
中创建一个 jest
块:
{
// ...
"jest": {
"moduleFileExtensions": [
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "vue-jest"
}
}
}
5.为 Jest 配置 Babel
尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性,你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest
:
npm install --save-dev babel-jest
接下来,我们需要在 package.json
的 jest.transform
里添加一个入口,来告诉 Jest 用 babel-jest
处理 JavaScript 测试文件:
{
// ...
"jest": {
// ...
"transform": {
// ...
// 用 `babel-jest` 处理 js
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
}
// ...
}
}
.babelrc
文件示例:
{
"env": {
"test": {
"presets": [["env", { "targets": { "node": "current" } }]]
}
}
}
6.放置测试文件
默认情况下,Jest 将会递归的找到整个工程里所有 .spec.js
或 .test.js
扩展名的文件。如果这不符合你的需求,你也可以在 package.json
里的配置段落中改变它的 testRegex
6.测试覆盖率
Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个简单的起步的例子:
扩展你的 jest
配置 (通常在 package.json
或 jest.config.js
中) 的 collectCoverage
选项,然后添加 collectCoverageFrom
数组来定义需要收集测试覆盖率信息的文件。
{
"jest": {
// ...
"collectCoverage": true,
"collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
}
}
这样就会开启默认格式的测试覆盖率报告。你可以通过 coverageReporters
选项来定制它们。
{
"jest": {
// ...
"coverageReporters": ["html", "text-summary"]
}
}
更多文档内容请移步至 Jest 配置文档,在那里你可以找到覆盖率阀值、目标输出目录等选项。
7.测试规范示例
如果你已经熟悉了 Jasmine,你应该很适应 Jest 的断言 API:
import { mount } from '@vue/test-utils'
import Component from './component'
describe('Component', () => {
test('is a Vue instance', () => {
const wrapper = mount(Component)
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
8.运行测试
npm run test
8.1.报错收集
window is undefined, vue-test-utils needs to be run in a browser environment.
You can run the tests in node using jsdom
应对办法:在package.json中加入
"jest":{
"testEnvironment": "jsdom"
}
8.2 报错
Multiple configurations found:
* D:/pratdemo/vue_demo/a_vue_Test/vue2_first_notest/jest.config.js
* `jest` key in D:/pratdemo/vue_demo/a_vue_Test/vue2_first_notest/package.json
Implicit config resolution does not allow multiple configuration files.
Either remove unused config files or select one explicitly with `--config`.
Configuration Documentation:
https://jestjs.io/docs/configuration.html
Test environment found at "D:\pratdemo\vue_demo\a_vue_Test\vue2_first_notest\node_modules\jest-environment-jsdom-fifteen\lib\index.js" does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".
应对办法:删除项目中的jest.config.js文件即可。(是因为jest的配置已经放在package.json中了,因此不需要这个了)
9最后的package.json对照
基于vue2.0采用的jest单元测试的配置
{
"name": "vue2_first_notest",
"version": "0.1.0",
"private": true,
"scripts": {
"test": "jest",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
"testEnvironment": "jsdom"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "^4.5.15",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/test-utils": "^1.2.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.3.1",
"babel-preset-env": "^1.7.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"jest": "^27.3.1",
"jsdom": "^18.0.1",
"jsdom-global": "^3.0.2",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11"
}
}
若想了解更多其他单元测试和集成测试,请看如下:
# or:
vue add @vue/unit-mocha
# end-to-end
vue add @vue/e2e-cypress
# or:
vue add @vue/e2e-nightwatch
如有问题,可以留言评论!