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