三步快速掌握“基于vue框架”的前端单元测试方法
Posted PaaS平台那些事
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三步快速掌握“基于vue框架”的前端单元测试方法相关的知识，希望对你有一定的参考价值。
点击蓝字
一说到单元测试，对于业务繁忙的同学们可能心理无形中有一种压迫感，平时只是单纯的业务开发可能都要996了，难道要007去完成单元测试？肯定业务上线为重呀！
当然业务固然重要，但其实代码质量也很重要。如果在开发前期没有关注代码的质量，很难在研发效率上做到质的飞越。原因很简单，在解决各种业务问题的时候，总是不由自主地引入其他问题，这样系统的稳定性就很难保证了。特别是在一些表单没有限制输入，前期没有单元测试覆盖，很容易在项目上线后，由于用户输入不正规的内容，导致系统报错。
其次，随着项目工程的复杂化、代码高复用性要求和前端代码模块之间的高内聚低耦合的要求，前端工程的单元测试显然是很重要的。
由上述分析可知，前端工程的单元测试对于系统的稳定性以及代码的维护意义重大。
因此，小编本期带领大家学习基于vue框架的前端单元测试方法，快搬小板凳来听课叭！
一、前端单元测试简介
1.单元测试概念
单元测试是以自动化来执行，代码里提供大量的函数示例。它需要对函数输入各种不同参数组合来进行调用，是针对程序的最小单元来进行正确性检验的测试工作。
一个单元可能是单个程序、类、对象、方法等，程序单元是应用的最小可测试部件。
2.单元测试用例
1 ）原则
测试代码要保持简洁，快速运行、快速编写。
抛弃开发人员的身份，只考虑测试场景，不考虑内部代码实现。
测试数据尽可能模拟现实场景，越接近现实场景越好。
充分考虑数据的边界条件。
对重点、复杂、核心的代码，着重测试。
利用 AOP(beforeEach、afterEach) ,减少测试代码数量，避免无用功能。
2）用例设计
任何一个单元测试都应该包含：
（1）正常输入
离散覆盖参数值
（2）边界输入
空值验证
零值验证
最大值验证
（3）非法输入
入参数据类型非法
内存溢出验证
二、前端单元设计实现
01
测试环境搭建
1.用到的框架
@vue/cli-plugin-unit-jest
@vue/test-utils
2.运行命令
npm run test:unit
3.针对相应项目
（1）针对新项目
vue-cli4本身是集成单元测试模块的，在创新新项目的时候，选择相应测试工具（Mocha+Chai和Jest），本篇文章所选的是Jest。
项目创建成功后有一个test文件夹，里面有一个example.spec.js的简单测试用例，运行npm run test:unit，即可对HelloWorld组件进行测试。
（2）针对老项目
在项目中安装@vue/cli-plugin-unit-jest单元测试模块，并添加jest.config.js配置文件如下，可对其进行简单的配置，详情可查看Jest官网。
const transformIgnorePatterns = [
'/dist/',
'node_modules/[^/]+?/(?!(es|node_modules)/)',
];
module.exports = {
collectCoverage: true, // 是否统计覆盖率
collectCoverageFrom: ["src/**/*.{js,vue}"], // 测试哪些目录文件的覆盖率
coverageDirectory: 'testReport', // 测试覆盖率报告目录
moduleFileExtensions: [ // 测试文件的类型
'js',
'jsx',
'json',
'vue',
],
testPathIgnorePatterns: ['/node_modules/', 'node'],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|gif|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'ant-design-vue': '<rootDir>/node_modules/ant-design-vue/es/index.js',
},
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)'// 设置识别哪些文件是测试文件
],
testURL: 'http://localhost/',
transformIgnorePatterns
}
02
单元测试规范
相应的单元测试规范主要有以下几点：
测试文件统一在src/tests目录中维护。
测试文件命名与Vue组件命名保持一致，后面以.spec.js结尾 ，比如：HolleWord.spec.js
一组功能集合测试使用describe("功能集合描述",()=>{})函数描述功能集合，一个测试文件只能描述一个功能集合，这个功能集合可以是一个Vue组件，也可以是一个功能模块。
Vue测试用例必须包含API覆盖性测试用例、DOM结构等校验。
03
单元测试代码设计
1.通用方法
源代码：
/**
* 判断是否为字符串
*params(str) String
*/
exportfunctionisString(str){
return (typeof str=='string')&&str.constructor==String;
}
单元测试用例：
import { isString } from"@/utils/test.js";
describe("类型检测", () => {
it("类型检测", () => {
expect(isString('aa')).toBe(true); // 正常输入 : 离散覆盖参数值
expect(isString('')).toBe(true); // 正常输入 : 离散覆盖参数值
expect(isString('12')).toBe(true); // 正常输入 : 离散覆盖参数值
expect(isString()).toBe(false); // 边界输入 : 空值验证
expect(isString(1)).toBe(false);
});
});
执行npm run test:unit， 在src/testReport/ 里有个index.html 文件可以查看单元测试覆盖率，包括语句覆盖率、分支覆盖率、函数覆盖率、代码行覆盖率的结果。
2.vue组件测试
在vue-unit-test中提供了shallowMount和mount 两个方法来实现组件的挂载。其中shallowMount只渲染组件本身，当只想对某个孤立的组件进行测试时，不渲染其下面的子组件。这样不仅可以避免其子组件的影响，还避免完全渲染子组件会导致组件的渲染树过大，影响到测试速度。
官方给的测试用例如下：
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, {
propsData: { msg }
}); // 挂载、渲染组件
expect(wrapper.text()).toMatch(msg); // 断言内容是否展示成功
constinput = wrapper.find('input') // 捕获组件中某个元素
input.element.value = 100
input.trigger('click') // 触发点击事件
});
});
3.引入vuex
shallowMount（浅渲染）方法接受一个挂载 options，用来给 Vue 组件传递一个伪造的 store。
使用 Jest 模拟 action 的行为传给 store，而 actionClick 这个伪造函数能够断言该 action 是否被调用过。
在测试 action 时只需关心 action 的触发，不需关注触发之后做了什么，因为 Vuex 的单元测试会涵盖相关的代码逻辑。
单元测试用例如下：
import { shallowMount, createLocalVue } from'@vue/test-utils'
import Actions from'@/components/action.vue'
import Vuex from'vuex'
const fakeStore = new Vuex.Store({
state: {},
actions: {
actionClick: jest.fn()
}
})
const localVue = createLocalVue()
localVue.use(Vuex)
it("调用方法", () => {
const wrapper = shallowMount(Actions, {
store: fakeStore, localVue
})
wrapper.find('button').trigger('click')
expect(actions.actionClick).toHaveBeenCalled()
})
三、常见问题以及解决方法
01
没有识别loading.gif这个文件
单元测试时可能报以下错误：没有识别loading.gif这个文件。
解决方法：在jest.config.js文件加上相应的文件后缀名。
02
没有引入相应的组件
没有引入相应的组件也是常见的问题之一。
解决方法：在单元测试文件加上引入组件代码，代码如下：
import Vue from'vue';
import {
Select,
} from'ant-design-vue';
Vue.use(Select);
以上就是本期的全部内容啦，还没学够？那就赶紧看看我们的往期推荐叭！
#往期推荐#
#
#
#
#
更多精彩内容请见历史文章~
金蝶云·苍穹
PaaS平台那些事
您的关注是我们更新的动力
以上是关于三步快速掌握“基于vue框架”的前端单元测试方法的主要内容，如果未能解决你的问题，请参考以下文章