Vue 应用测试
项目环境搭建 运行 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?" @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('[]') // 查找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='' } } } };
TDD 原则
独立测试 不同代码的测试应该相互独立，一个类对应一个测试类（对于 C 代码或 C++ 全局函数，则一个文件对应一个测试文件），一个函数对应一个测试函数。 用例也应各自独立。每个用例不能使用其他用例的结果数据，结果也不能依赖于用例执行顺序。 一个角色：开发过程包含多种工作，如：编写测试代码、编写产品代码、代码重构等。做不同的工作时，应专注于当前的角色，不要过多考虑其他方面的细节。
测试列表 代码的功能点可能很多，并且需求可能是陆续出现的，任何阶段想添加功能时，应把相关功能点加到测试列表中，然后才能继续手头工作，避免疏漏。
测试驱动 即利用测试来驱动开发，是TDD的核心。要实现某个功能，要编写某个类或某个函数，应首先编写测试代码，明确这个类、这个函数如何使用，如何测试，然后在对其进行设计、编码。
先写断言 编写测试代码时，应该首先编写判断代码功能的断言语句，然后编写必要的辅助语句。
可测试性 产品代码设计、开发时应尽可能提高可测试性。每个代码单元的功能应该比较单纯，“各家自扫门前雪”，每个类、每个函数应该只做它该做的事，不要弄成大杂烩。尤其是增加新功能时，不要为了图一时之便，随便在原有代码中添加功能，对于 C++ 编程，应多考虑使用子类、继承、重载等OO方法。
及时重构 对结构不合理，重复等“味道”不好的代码，在测试通过后，应及时进行重构。
小步前进 软件开发是复杂性非常高的工作，小步前进是降低复杂性的好办法。
TDD 的优点 保证代码质量，因为先编写测试，所以可能出现的问题都被提前发现了； 促进开发人员思考，有利于程序的模块设计； 测试覆盖率高，因为后编写代码，因此测试用例基本都能照顾到。
TDD 的缺点 代码量增多，大多数情况下测试代码是功能代码的两倍甚至更多； 业务耦合度高，测试用例中使用了业务中一些模拟的数据，当业务代码变更的时候，要去重新组织测试用例； 关注点过于独立，由于
单元测试只关注这一个单元的健康状况，无法保证多个单元组成的整体是否正常； 个人理解在前端应用实际开发过程中 TDD 更适合开发纯函数库，比如 Lodash、Vue、React 等。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
权威发布，测试选择不纠结！第15届软件测试行业报告，直击行业发展，把握未来方向！
