Vue 单元测试详解

单元测试简介

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。

简单来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。

端到端测试（e2e测试）

e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构，js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求。

单元测试的目的

当你的项目足够大的时候，在叠加模块和组件的过程中，是很有可能影响之前的模块。但是被影响的模块已经通过了测试，我们在迭代的时候，很少有测试人员会去重新测试这个系统。所以，被影响的模块很可能就有了一个隐形的bug被部署到线上。因此我们采用自动化测试。

最主要的作用是对于大型项目，在每次迭代的时候， 可以保证整个系统的正确运行， 确保系统的健壮。

单元测试的比较

jest + Vue Test Utils

1.Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，配置较少，对vue框架友好。

2.Vue Test Utils 是 Vue.js 官方的单元测试实用工具库，为jest和vue提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。

3.vue-cli 默认的单元测试也是使用的这套方案

对于不了解Vue Test Utils 的同学可以先看这里 VueTestUtils,
想了解Jest 的同学可以看这里 Jest

Karma + Mocha+ + Chai+ Vue-Test-Utils

1 多个框架配合在一起，配制繁琐
2 解决问题需要对多个框架熟悉才能进行精准定位，学习成本高

组件的单元测试有很多好处：

（官方文档）

• 提供描述组件行为的文档
• 节省手动测试的时间
• 减少研发新特性时产生的 bug
• 改进设计
• 促进重构

自动化测试使得大团队中的开发者可以维护复杂的基础代码。

组件之所以难以测试，是因为其有太多的 props、依赖、引用的模型和对全局变量的访问 – 这都是不良设计的标志。

一个设计不佳的组件，就会变成无法测试的，进而你就会简单的跳过单元测试，又导致了其保持未测试状态，变成一个恶性循环。

断言库

断言库主要提供上述断言的语义化方法，用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果，要么成功、要么失败。常见的断言库有 Should.js, Chai.js 等。

测试用例 test case

为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，以便测试某个程序路径或核实是否满足某个特定需求。
一般的形式为：

it('should ...', function() {
	...
		
	expect(sth).toEqual(sth);
});

测试套件 test suite

通常把一组相关的测试称为一个测试套件
一般的形式为：

describe('test ...', function() {
	
	it('should ...', function() { ... });
	
	it('should ...', function() { ... });
	
	...
	
});

Jest

编写单元测试的语法通常非常简单；对于jest来说，由于其内部使用了 Jasmine 2 来进行测试，故其用例语法与 Jasmine 相同。
实际上，只要先记这住四个单词，就足以应付大多数测试情况了：

describe： 定义一个测试套件
it：定义一个测试用例
expect：断言的判断条件
toEqual：断言的比较结果

describe('test ...', function() {
	it('should ...', function() {
		expect(sth).toEqual(sth);
		expect(sth.length).toEqual(1);
		expect(sth > oth).toEqual(true);
	});
});

Vue Test Utils

它模拟了一部分类似 jQuery 的 API，非常直观并且易于使用和学习，提供了一些接口和几个方法来减少测试的样板代码，方便判断、操纵和遍历 Vue Component 的输出，并且减少了测试代码和实现代码之间的耦合。
一般使用其 mount() 或 shallowMount() 方法，将目标组件转化为一个 Wrapper 对象，并在测试中调用其各种方法，例如：

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

总结

单元测试作为一种经典的开发和重构手段，在软件开发领域被广泛认可和采用；前端领域也逐渐积累起了丰富的测试框架和方法。
单元测试可以为我们的开发和维护提供基础保障，使我们在思路清晰、心中有底的情况下完成对代码的搭建和重构。
封装好则测试易，反之不恰当的封装让测试变得困难。
可测试性是一个检验组件结构良好程度的实践标准。