项目环境搭建
运行 vue create [project-name] 来创建一个新项目。前端选择 "Manually selectfeatures" 和 "UnitTesting"，自动以及 "Jest" 作为 test runner。化测
一旦安装完成，应用cd 进入项目目录中并运行 yarn test:unit。测试
通过 jest 配置文件：
\jest.config.js ==> node_modules\@vue\cli-plugin-unit-jest\jest-preset.js ==> \node_modules\@vue\cli-plugin-unit-jest\presets\default\jest-preset.js
jest-preset.js 文件就是前端 Vue 项目创建后，默认的自动 jest 配置文件：
module.exports= { // 可加载模块的后缀名 moduleFileExtensions: [ js, jsx, json, // tell Jest to handle *.vue files vue ], // 转换方式 transform: { // process *.vue files with vue-jest // 如果.vue结尾的，使用vue-jest进行转换 ^.+\\.vue$: require.resolve(vue-jest),化测 .+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$: require.resolve(jest-transform-stub), ^.+\\.jsx?$: require.resolve(babel-jest) }, // 转换时忽略文件夹 transformIgnorePatterns: [/node_modules/], // support the same @ -> src alias mapping in source code // webpack 的别名映射转换 moduleNameMapper: { ^@/(.*)$:<rootDir>/src/$1 }, // 指定测试环境为 jsdom testEnvironment:jest-environment-jsdom-fifteen, // serializer for snapshots // 快照序列化器 // 使用 jest-serializer-vue 进行组件快照的序列化方式 // 就是将组件转为字符串,后面进行快照测试时,就可以看到了 snapshotSerializers: [ jest-serializer-vue ], // 测试代码文件在哪里 testMatch: [ **/tests/unit/**/*.spec.[jt]s?(x), **/__tests__/*.[jt]s?(x) ], // https://github.com/facebook/jest/issues/6766 testURL:http://localhost/, // 监视模式下的插件 watchPlugins: [ require.resolve(jest-watch-typeahead/filename), require.resolve(jest-watch-typeahead/testname) ] } 快速体验
默认测试用例：tests\unit\example.spec.js
//tests\unit\example.spec.js // 导入组件挂载器，不用手动写vue入口 import { shallowMount } from@vue/test-utils // 导入要测试的应用组件 import HelloWorld from@/components/HelloWorld.vue describe(HelloWorld.vue, () => { it(rendersprops.msg when passed, () => { const msg =newmessage const wrapper =shallowMount(HelloWorld, { props: { msg } }) expect(wrapper.text()).toMatch(msg) }) }) $ npm runtest:unit 搭建完基本的 Vue 测试环境，在正式开始 Vue 测试之前，测试我们先了解一下测试开发的前端方法。
测试开发方式
测试不仅能够验证软件功能、自动保证代码质量，网站模板化测也能够影响软件开发的应用模式。
测试开发有两个流派：
TDD：测试驱动开发，测试先写测试后实现功能 BDD：行为驱动开发，先实现功能后写测试 什么是TDD
TDD(Test-driven development)，就是测试驱动开发，是敏捷开发中的一项核心实践和技术，也是一种软件设计方法论。
它的原理就是在编写代码之前先编写测试用例，由测试来决定我们的代码。而且 TDD 更多地需要编写独立的测试用例，比如只测试一个组件的某个功能点，某个工具函数等。云服务器
TDD开发流程：
编写测试用例 运行测试 编写代码使测试通过 重构/优化代码 新增功能，重复上述步骤 // tests\unit\example.spec.js // 导入组件挂载器，不用手动写vue入口 import { shallowMount } from@vue/test-utils // 导入要测试的组件 import HelloWorld from@/components/HelloWorld.vue import { add} from@/utiles/math.js // 输入：1,2 // 输出：3 test(sum, () => { expect(add(1,2)).toBe(3) }) 单纯运行测试代码肯定报错，有了测试代码，为了通过测试，再具体写 math 模块中的 add() 方法：
// math.js functionadd (a, b) { return a + b } exportdefault add Vue 3 的 TDD 测试用例
src\components\TodoHeader.vue 组件内容
<template> <header> <h1>Todos</h1> <input v-model="inputValue" placeholder="What needs to be done?" data-testid="todo-input" @keyup.enter="handleNewTodo" /> </header> </template> 测试用例：
tests\unit\example.spec.js
// 导入组件挂载器，不用手动写vue入口 import { shallowMount } from@vue/test-utils // 导入要测试的组件 import HelloWorld from@/components/HelloWorld.vue import TodoHeader from@/components/TodoHeader.vue test(unit: new todo,async () => { const wrapper =shallowMount(TodoHeader) // 挂载渲染组件 const input = wrapper.find([data-testid="todo-input"]) // 查找input // 给input设置一个值 const text =helloworld await input.setValue(text) // 触发事件 await input.trigger(keyup.enter) // ========= // 以上是具体操作，输入内容按下回车后，希望做什么？↓👇 // ========= // 验证应该发布一个对外的 new-todo 的事件 expect(wrapper.emitted()[new-todo]).toBeTruthy() // 验证导出事件的参数是否是传入的值 expect(wrapper.emitted()[new-todo][0][0]).toBe(text) // 验证文本框内容是否清空 expect(input.element.value).toBe() }) src\components\TodoHeader.vue 组件内容
exportdefault { data(){ return { inputValue: } }, methods:{ handleNewTodo(){ if(this.inputValue.trim().length){ // 发布对外的 new-todo 事件值为文本框输入内容 this.$emit(new-todo,this.inputValue) this.inputValue= } } } };