一说到单元测试，对于业务繁忙的同学们可能心理无形中有一种压迫感，平时只是单纯的业务开发可能都要996了，难道要007去完成单元测试？肯定业务上线为重呀！

当然业务固然重要，但其实代码质量也很重要。如果在开发前期没有关注代码的质量，很难在研发效率上做到质的飞越。原因很简单，在解决各种业务问题的时候，总是不由自主地引入其他问题，这样系统的稳定性就很难保证了。特别是在一些表单没有限制输入，前期没有单元测试覆盖，很容易在项目上线后，由于用户输入不正规的内容，导致系统报错。

其次，随着项目工程的复杂化、代码高复用性要求和前端代码模块之间的高内聚低耦合的要求，前端工程的单元测试显然是很重要的。

由上述分析可知，前端工程的单元测试对于系统的稳定性以及代码的维护意义重大。

因此，小编本期带领大家学习基于vue框架的前端单元测试方法，快搬小板凳来听课叭！

1 前端单元测试简介

1.1 单元测试概念

单元测试是以自动化来执行，代码里提供大量的函数示例。它需要对函数输入各种不同参数组合来进行调用，是针对程序的最小单元来进行正确性检验的测试工作。

一个单元可能是单个程序、类、对象、方法等，程序单元是应用的最小可测试部件。

1.2 单元测试用例

1. 原则

测试代码要保持简洁，快速运行、快速编写。
抛弃开发人员的身份，只考虑测试场景，不考虑内部代码实现。
测试数据尽可能模拟现实场景，越接近现实场景越好。
充分考虑数据的边界条件。
对重点、复杂、核心的代码，着重测试。
利用 AOP(beforeEach、afterEach) ,减少测试代码数量，避免无用功能。

2. 用例设计

任何一个单元测试都应该包含：

（1）正常输入

离散覆盖参数值

（2）边界输入

空值验证
零值验证
最大值验证

（3）非法输入

入参数据类型非法
内存溢出验证

2 前端单元设计实现

2.1 测试环境搭建

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
}

2.2 单元测试规范

相应的单元测试规范主要有以下几点：

测试文件统一在src/tests目录中维护。
测试文件命名与Vue组件命名保持一致，后面以.spec.js结尾，比如：HolleWord.spec.js
一组功能集合测试使用describe("功能集合描述",()=>{})函数描述功能集合，一个测试文件只能描述一个功能集合，这个功能集合可以是一个Vue组件，也可以是一个功能模块。
Vue测试用例必须包含API覆盖性测试用例、DOM结构等校验。

2.3 单元测试代码设计

1. 通用方法

源代码：

/**
 * 
判断是否为字符串
 *params(str) String
 */
exportfunctionisString(str){
 return (typeof str=='string')&&str.constructor==String;
}

单元测试用例：

mport { 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); //  断言内容是否展示成功
const input = 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()
})

3 常见问题以及解决方法

3.1 没有识别loading.gif这个文件

单元测试时可能报以下错误：没有识别loading.gif这个文件。

解决方法：在jest.config.js文件加上相应的文件后缀名。

3.2 没有引入相应的组件

没有引入相应的组件也是常见的问题之一。

解决方法：在单元测试文件加上引入组件代码，代码如下：

import Vue from 'vue';
import {
    Select,
} from 'ant-design-vue';
Vue.use(Select);

以上就是本期的全部内容啦，还没学够？那就赶紧看看我们的往期推荐叭！

#相关推荐#

# 教你玩转“产品数据入仓”！

# 好家伙，当场学会了苍穹API接口测试！

# 一篇揭秘"苍穹OpenAPI接口测试"的好文！

更多精彩内容，“码”上了解！↓

三步快速掌握“基于vue框架”的前端单元测试方法

三步快速掌握“基于vue框架”的前端单元测试方法

恭喜您！