前端单元测试

前端单元测试是什么?

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如 C 语言中单元指一个函数，Java 里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。——百度百科

认为前端代码都运行在浏览器里，如何做单元测试？！对于 Javascript 来讲，当然是可以进行单元测试的，并且也通常是针对函数、模块、对象进行测试。前端单元测试狂阶也有不少，比如 QUnit、Sinon、Mocha 等等，单元测试的执行环境可以是我们日常使用的浏览器 ie、Chrome 等，也可以是无界面浏览器比如 PhantomJS、Headless Chrome。
在前端的世界里，至少需要三类工具来进行单元测试：

• 测试管理工具

测试管理工具是用来组织和运行整个测试的工具，它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。我们经常使用Karma

• 测试框架

测是框架是单元测试的核心，它提供了单元测试所需的各种 API，你可以使用它们来对你的代码进行单元测试。我们使用Mocha

• 断言库

断言库提供了用于描述你的具体测试的 API，有了它们你的测试代码便能简单直接，也更为语义化，理想状态下你甚至可以让非开发人员来撰写单元测试。我们使用sinon-chai

可选工具包括：

• 测试浏览器

这个比较好理解，就是测试代码所执行的浏览器环境。我们使用 PhantomJS 或者Headless Chrome

• 测试覆盖率统计工具

我们使用和 Karma 配套的Karma-coverage

Vue 工程的单元测试如何做?

下面着重讲解 Vue 工程如何进行自动化的单元测试。本文讲解的是使用 Vue-cli 或者 bfe-cli 创建的工程如何使用。测试工具默认使用了上文的推荐工具。
首先在 /test/unit/specs/ 文件夹中增加一个测试案例文件，命名为 < 模块名称 >.spec.js。框架代码会自动扫描以.spec.js 结尾的文件当做测试案例进行执行。
假设我们有一个这样的组件MyComponent.vue:

<template>
  <span class="message">{{message}}</span>
  <span class="message2">{{message2}}</span>
</template>

<script>
  export default {props: ['message2'],
    data () {
      return {message: 'hello!'}
    },
    created () {this.message = 'bye!'}
  }
</script>

这个组件有输入参数 message2、有方法、有输出，麻雀虽小五脏俱全，如何做单元测试呢？

// 导入工具方法
import {createTest, destroyVM} from '../util';
import MyComponent from 'path/to/MyComponent.vue'

describe('MyComponment', () => {
  let vm = null;
  // 每个案例执行完成后销毁组件实例
  afterEach(() => {destroyVM(vm);
  });
  // 第一个案例，检查组件是否有 created 方法,has a created 是案例名称
  it('has a created', () => {expect(typeof MyComponent.created).toBe('function');
  })
  // 检查 data 设置是否正确
  it('sets the correct default data' () => {expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // 检查渲染后的组件状态
  it('renders the correct message', () => {vm = createTest(MyComponent);
    expect(vm.$el.querySelector('.message').textContent).to.equal('bye!')
  })
  // 检查传参是否正确
  it('renders correctly with different props', () => {
    vm = createTest(MyComponent, {message2: 'test1'});
    expect(vm.$el.querySelector('.message2').textContent).to.equal('test1')
  })
})

测试案例写好了，接下来我们来执行一下

$ npm run test

... 省略启动信息...

  MyComponment.vue
    ✓ has a created
    ✓ sets the correct default data
    ✓ renders the correct message
    ✓ renders correctly with different props

PhantomJS 2.1.1 (Linux 0.0.0): Executed 4 of 4 SUCCESS (0.193 secs / 0.058 secs)
TOTAL: 4 SUCCESS

从结果可以看出，一共 4 个案例，成功执行 4 个，测试案例是使用 PhantomJS 无头浏览器执行的。同时，在 /test/unit/coverage/lcov-report/ 文件夹下可以找到测试报告，里面有详细的代码覆盖率情况，可以明确的看出哪些代码没有被测试到。下图为 bfe-ui 的测试报告。
[图片上传中...(image-504899-1542697571870-0)]

结合 Gitlab-CI 可以在工程每一次提交代码时进行一次单元测试，将所有案例自动执行一遍，并且给出测试报告，并将执行结果可视化的反馈在流水线上。

以上就是关于 Vue 工程如何做单元测试的全部内容。