前端测试初识

最近打算开始写vue的组件测试，所以恶补一下前端测试相关的基础知识。本文主要罗列前端测试开发的技术栈。并对其中使用的测试框架，以及测试框架的主要功能谈谈自己的理解。如有不正确的地方或者是错误的理解，希望各位多多指出~

PS: 搜索了前端的测试文章，大概都是15年左右的文章，在文末列出我所阅读的相关文章博客。

前端怎样去测试？

当我们想对一段代码、一个函数、一个功能模块进行测试时，我们都需要做些什么呢？

1. 测试框架，我们需要一个测试框架，通过它来描述一个测试场景或者是一个测试任务。

// 使用Mocha 描述一个测试场景var assert = require('assert')function hello () {return 'hello'}describe('H', function() {    describe('#hello', function() {        it('hello function should return "hello"', function(){            let result = hello()            assert.equal('hello', result)// 断言        })    })})

2. 断言库，我们需要去判断测试时所预想的结果与源码的执行结果是否一致，如果不一致需要抛出错误。

3. Mock库，在测试中，我们有时会根据某依赖函数的特殊结果进行测试，当这个“特殊结果”不易复现时，我们可以通过Mock的方式处理。

测试有哪些相关技术栈呢？

以下是当前比较流行的技术栈 : 使用 Jasmine 或者是 Mocha，Chai，Sinon 的组合使用

Jasmine 

Jasmine是一个大而全的框架，Jasmine集测试，断言，Mock功能于一身。对于一些简单的测试场景，Jasmine提供了足够完全的测试功能，简单而言，就是测试有它就够了。

Mocha，Chai，Sinon

Mocha 是一个灵活的具有丰富特性的JavaScript测试框架。它只专注于描述一个测试任务。在刚刚的代码片段中，我们也看到了，如何使用Mocha对一个测试任务进行描述。在测试任务的描述上，它与Jasmine是相似的。

Chai 是一个BDD／TDD的断言库，它提供了Should，Expert，Assert三种语境(选哪个你随意啦)去对测试任务断言。

Sinon 是一个Mock库。可以记录函数的调用测试，模拟函数的入参，模拟函数特定的返回值等等。

如何编写一个测试呢？

接下来以Mocha，Chai，Sinon的组合，简单的描述一个测试任务。

const chai = require('chai')const sinon = require('sinon')const { findSecondMax } = require('../src/func.js')// expect是chai断言的一种语法方式const expect = chai.expect;describe('#findSecondMax', ()=>{    it('Should return the second max value', () => {        expect(findSecondMax([1, 2, 3])).to.equal(2)    })    it('Should Run once', ()=> {        const func = sinon.spy(findSecondMax)        func([1,2,3])        expect(func.callCount).to.equal(1)    })})

我们对findSecondMax这个函数进行了检测。在代码中简单的对测试任务进行了描述与断言。

但是，这里只是用sinon去判断了函数的执行次数，这是sinon.spy的一个简单用法，spy还有模拟函数返回数据的功能等，这里就不详细介绍了。

如何在浏览器中测试呢？

我们都知道，JavaScript运行有两类环境，一个浏览器环境，另一个是NodeJS环境，在不同的环境中，有一些变量是无法共有的。例如，在浏览器中，我们可以使用全局变量中的Document对象，在NodeJS中，我们可以使用NodeJS提供的require包引入等。

Karma

karma是一个自动执行测试任务的框架，它的功能有点类似于Gulp。但我认为，Karma更重要的特性是，它提供了对不同测试框架的适配器和相关配置，可以使得测试得以在浏览器的环境运行。

关于具体的使用，Karma的官网已经有了很好的介绍，欲知详情，可以自己去官网看看。在这里提一句，vue-cli生成的vue项目中，测试使用了karma框架，在karma.conf.js中，我们也可以学习到一些配置。

其他工具的使用

代码覆盖率

Istanbul

Istanbul是一个分析代码执行的覆盖率。运行它本身会运行一遍js文件并对它的代码进行检测，分析有哪些代码是未执行的。但这并没有什么卵用。我们更多的是要在检测自己的测试任务有没有完全覆盖到编写的源码文件

总结

本文主要介绍了当前前端测试所需的技术栈，并简单介绍技术栈中每一个框架的作用与简单的实例。

PS: 本来是想对每个工具都详细介绍，但是由于篇幅问题，只能草草收尾。不过，在框架的官网中，具体的使用已经很详细了

最后给自己列一个flag，下一篇文章会记录自己使用如上技术栈，如何对Vue组件的开发进行测试。

PS： 好像饿了么的前端专栏已经写了Vue的单元测试。

相关阅读:

Jasmine VS Mocha

Using Mocha Chai Sinon to test Node.js

以及各大官网