vue项目单元测试编写-mocha（三）

vue项目单元测试编写-mocha

此文章涉及使用mocha进行vue组件的单元测试编写，chai和sinon单元测试辅助工具的使用。如果需要了解vue-cli3.0项目测试环境的安装，请移步到我上一篇文章中。本篇默认安装了上述测试库和测试环境。
前端vue单元测试环境搭建

mocha的使用

mocha是一个编写js单元测试的框架，这里我们使用他作为模块以及vue组件的单元测试框架。

语法&API

mocha是一个灵活，简洁的测试框架，所以他只提供了基础的测试语法和极少的API，他们都是函数，可以直接使用，无须引入之类的：

• describe(name, fn) 定义一组测试，即测试套件

• it(name, fn) 定义一项测试，是测试的最小单元

// moduleName.spec.js
// 定义一组测试
describe('describeName', () => {
   
   // 定义一项测试
   it('testName', () => {
   
       // 测试内容
   })
})

在上面代码中，一个测试文件包含多个describe块，describe你可以理解为一个测试套件，表示定义一组测试，而it则是最小的测试单元，定义一个测试用例。describe可以嵌套describe，一个describe可以包含多个it。你可以根据describe来划分业务模块和功能模块的测试，然后里面包含一组组相关的测试用例。以此来整理你的测试用例。

挂起测试

当你使用it时，只传递第一个参数，即单元测试的名称时，而没有传递第二个函数参数时，那么这个测试会被视为挂起状态pending，也会体现在测试报告中。

关于测试的一些小约定

• 测试文件一般放在根目录下的tests文件夹中（一般约定是这个（vue-cli项目默认就是这个），好像也有用test文件夹的），然后编写测试的js文件一般以：.test.js或者.spec.js结尾，这也是一个约定吧。当然了，这也只是大多数人的一个约定。

• 测试文件的文件名 = 被测试模块名 + .(test|spec).js，最好按模块或者组件或者业务逻辑分类进行测试模块的文件夹分类。以此来管理你的测试文件。

测试用例的编写

你可以使用describe来定义一个测试套件，即可以看做测试块，然后你也可以在describe中嵌套多个it，it指一个个的测试用例，你还可以在describe嵌套describe，比如：

// example.spec.js
describe('测试模块一', () => {
   

    it('测试用例一', function () {
   
        // 测试代码

    });
    it('测试用例二', function () {
   
        // 测试代码
    });
    describe('测试子模块', () => {
   
        it('测试用例三', function() {
   
            // 测试代码
        })
    })

})

ps：上面代码有一点问题，在describe函数中，第二个参数的函数最好是不要使用箭头函数，因为如果使用箭头函数，就无法使用describe中的一些方法，比如this.timeout等。it中也最好不要用箭头函数，或者在整个使用mocha编写测试时最好都不要用箭头函数。如果你不需要使用上下文那用箭头函数也无所谓，不过，与其在编写时打擦边球，不如一开始就杜绝不推荐的用法。

测试结果

  测试模块一
    √ 测试用例一
    √ 测试用例二
    测试子模块
      √ 测试用例三


  4 passing (40ms)

测试通过和失败

在一个单元测试中，即一个it块中，如果其第二个参数的函数在执行时抛出了异常，那么这个测试就会被判定为不通过，换句话说：只要测试不抛出错误，测试就算是通过。

describe('测试模块一', () => {
   
    it('测试用例一', function () {
   
        // 空的测试用例，什么也没做
    });
    it('测试用例二', function () {
   
        // 抛出错误
        throw new Error('测试用例二测试出错');
    });
})

输出结果（测试不通过）：

  测试模块一
    √ 测试用例一
    1) 测试用例二 // 红色的


  1 passing (227ms)

  1 failing

  1) 测试模块一
       测试用例二:
     Error: 测试用例二测试出错
      at Context.