前排提醒，并不是所有的项目都需要单元测试，因为写单元测试真的很耗时间。单元测试主要针对需求变更不多，项目时间充裕的项目。如elementui这种框架类的项目
本文主要针对vue3+vuecli4
这里主要有两种情况：新建项目和老项目
对于新建项目，在通过脚手架生成时可选择"unit testing"，之后会自动生成相应配置。
这里主要介绍的是老项目添加单元测试。进入项目根目录，控制台输入
vue add @vue/unit-jest 此时脚手架会自动安装jest相关依赖，并生成对应配置，修改文件如下：
1. package.json
"scripts": {
"test:unit": "vue-cli-service test:unit",
},
"devDependencies": {
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"jest": "^27.0.5"
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]2. jest.config.js
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}
3. test 文件夹，其中包含unit文件夹及example.spec.js文件，该文件为示例代码，可删除
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
props: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})
文件生成之后其实已经可以进行单元测试了，可以在自动生成的unit文件下新建 xxx.spec.js 并引入需要测试的组件，也可以在对应的组件文件夹中新建__tests__文件，并在文件夹下新建xxx.test.js（规则可参考package.json中的override配置）
需要注意的是，有些项目可能配置了别名，这时就需要在jest.config.js中配置moduleNameMapper了
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'^@base/(.*)$': '<rootDir>/base_component/$1'
} // 别名
}
这里我需要测试的是公共组件，因此在公共组件的button文件夹下新增了__tests__文件，并新建测试文件button.spec.js
import { mount } from '@vue/test-utils'
import ButtonComp from '../index'
test('button', () => {
// const wrapper = mount(ButtonComp)
})
控制台运行jest发现报错
因为项目用到的插件不符合规范，因为需要做兼容配置，在jest.config中新增transformIgnorePatterns配置
transformIgnorePatterns: [
'node_modules/(?!lodash-es/.*)'
],在此运行jest可以发现运行成功了
至此配置完毕，可以愉快的进行测试用例编写了。以下为vue官方测试用例文档文章来源：https://www.toymoban.com/news/detail-526623.html
Vue Test Utils 文章来源地址https://www.toymoban.com/news/detail-526623.html
到了这里，关于vue3配置jest自动化测试的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
