单元测试

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

Assert

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

比如

console.assert(1 === 1)

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

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

chai.js

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组件代码如下：

<template>
  <button :class="color" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    color: {
      type: String
    }
  }
};
</script>

JS 代码如下：

import Vue from 'vue';
import Button from './button';

Vue.component('t-button', Button);

new Vue({
  el: '#app',
  data: {
    counter: 0
  }
});

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

  <div id="app">
    <t-button color='black' @click="counter += 1">按钮</t-button>
  </div>

那么该如何用 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 组件的同时绑定一个函数，那么该如何检查模拟点击时，该函数执行情况呢？

  <div id="app">
    <t-button color='black' @click="counter += 1">按钮</t-button>
    <p>你点击了{{counter}}次</p>
  </div>

这里我们就需要 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 组件能够正常发挥作用。 但本次测试时，写一个测试用例就需要打开浏览器看运行情况，下次考虑用窗口展示测试结果。