单元测试-白红宇

在项目的开发过程中，我们经常需要去测试我们的代码，以保证代码能在各种情况下正常运行，测试可以人工测试，也可以用代码来测试，下面就来接触下用代码来测试。

Assert

Assert，翻译过来就是断言，可以用来判断真伪。

比如

console.assert(1 === 1)复制代码

这句话的意思就是我断言1 === 1，这个断言当然是真的，那么运行时不会产生反应，反之如果断言出错，就会产生反应。

但是这个断言功能太弱鸡了，一点都不好用，遇到稍微复杂些的断言就很麻烦，例如判断一个数组的长度，所以我们需要引入一个断言库。

chai.js

是一个断言库，可以让我们使用更加自然的语言去做断言，chai.js有 3 种表达方式，分别为should、expect和assert，我个人更喜欢expect，它更符合自然语言的语法。

//expect 的使用方式expect(foo).to.be.a('string');expect(foo).to.equal('bar');expect(foo).to.have.lengthOf(3);expect(tea).to.have.property('flavors')  .with.lengthOf(3);复制代码

安装

npm i -D chai

使用

这个举一个小例子，拿一个很简单的自定义 button 组件来说，这个组件就一个功能，接受一个颜色参数，并将这个颜色参数设置为button的类，button组件代码如下：


    复制代码

JS 代码如下：

import Vue from 'vue';import Button from './button';Vue.component('t-button', Button);new Vue({  el: '#app',  data: {    counter: 0  }});复制代码

那么在使用这个组件的时候，传入一个颜色参数，那么期待的结果就是在页面生成一个class为这个颜色参数的 button。

那么该如何用 chai 来测试这段代码的运行是否正确呢？

首先引入 chai

import chai from 'chai';const expect = chai.expect;复制代码

然后利用 JS 生成一个 button，然后检查它的 class。

{  let div = document.createElement('div');  document.body.appendChild(div);  const Constructor = Vue.extend(Button);  const vm = new Constructor({    propsData: {      color: 'red'    }  }).$mount(div);  const element = vm.$el;  //我断言这个生成的 button 有一个类名叫 'red' 为真  expect(element.classList.contains('red')).to.eq(true);  vm.$el.remove();  vm.$destroy();}复制代码

为保证断言代码的正确，一般第一次故意写一个假断言，用来测试断言出错的时候会报错。例如

expect(element.classList.contains('black')).to.eq(true);复制代码

那么就会出现断言错误。

后面再将断言改为预期的结果，。

断言函数的执行与否

如果在使用这个 button 组件的同时绑定一个函数，那么该如何检查模拟点击时，该函数执行情况呢？


        
     
      按钮
         
     你点击了{
   {counter}}次
  
    
复制代码

这里我们就需要 mock 了。

chai-spies

安装

npm i -D chai-spies

使用

首先先引入。

import spies from 'chai-spies';chai.use(spies);复制代码

再断言

{  const Constructor = Vue.extend(Button);  const vm = new Constructor({    propsData: {      color: 'red'    }  }).$mount();  //生成一个间谍函数  let spy = chai.spy(() => {});  //让这个间谍函数代替原来的函数，如果 click 触发了就执行这个间谍函数  vm.$on('click', spy);  //模拟点击  vm.$el.click();  //期待间谍函数被调用了  expect(spy).to.have.been.called();  vm.$destroy();}复制代码

这样这个测试用例通过之后，就可确保当按钮被点击之后，绑定的函数能够执行。

后记

这里利用 chai 和 chai-spies 做了两个简单的测试，以保证 button 组件能够正常发挥作用。但本次测试时，写一个测试用例就需要打开浏览器看运行情况，下次考虑用窗口展示测试结果。