[译] 如何为 Vue 项目写单元测试

译者：明非

连接：https://fanmingfei.com/posts/A_Vue_Unit_Text_Tutorial.html

原文：https://scotch.io/amp/tutorials/how-to-write-a-unit-test-for-vuejs?from=timeline&isappinstalled=0

众所周知，Vue.js 是一个很是牛逼的 JavaScript 框架，对于建立复杂功能的前端项目是很是有用的。不论是什么项目，检查应用是否正常工做，运行是否为预期，是尤其重要的。然而，为了保证业务正常运行，咱们的项目，每作一次更新，都要对全部功能作一次回归测试，随着项目的增大，重复的测试工做愈来愈多，愈来愈乏味，手工测试将变成一个恶心的事情。正因如此，自动化测试诞生了，它能够随时监测咱们的代码是否正常工做，运行结果是否符合预期。在这个教程中，咱们将建立一个简单的VueJS项目，并为其写一个简单的单元测试。

咱们建立一个基本的 to-do list 组件进行测试。咱们将要测试的是，列表展现是否正确，用户是否能够正常添加到 to-do list。经过这个教程，你将学会如何去为你的组件写一个测试，测试包括HTML展现是否正确以及用户的操做是否能正常进行。

这个git库是这篇文章的全部代码。

建立项目

建立 JavaScript 项目多是一个复杂的过程。琳琅满目的依赖库供咱们选择。不过还好，咱们可使用vue-cli来建立VueJS项目，它帮咱们包办一切。运行 npm install 来安装依赖：

npm install -g vue-cli
vue init webpack project-name

在这个过程当中，你可能会遇到几个提示。大多数提示比较简单易懂，你能够直接选择默认选项。须要注意的是，咱们须要是否安装 vue-router、Karma、Mocha的提示后输入YES来引入这些工具。而后开始安装依赖：

cd project-name
npm install

接下来咱们执行下面的命令，这个命令将会在本地运行你的应用并在浏览器中打开。

npm run dev

若是你的网络好的话，一会就装好了。

依赖

Webpack (2.3) 是一个打包器，它能够合并打包JavaScript，CSS，HTML文件，而且提供给应用运行。Bable (v6.22) 是一个编译器，用来把ES6编译成ES5。目前有不少 JavaScript 标准在许多浏览器中尚未被支持，因此须要将ES6转成ES。

测试依赖

Karma (v1.4) 是一个运行时，它产生一个 Web 服务环境来运行项目代码，而且执行测试。Mocha (v3.2) 是一个 JavaScript 测试框架。Chai (v3.5) 是一个 Mocha 可使用的断言库。

在你的项目中，你能够找到下面这些目录：build、config、node_modules、src、static 和 test。对于本教程来讲最重要的是src，它包括咱们应用的代码，用来测试。

第一次测试

从最基本的开始去作通常都没错。咱们将从建立简单的列表组件开始。在 src/components 里建立一个新文件叫作 List.vue 而且将下面代码写进去。

<template>
  <div>
    <h1>My To Do List</h1>
    </br>
    <!--displays list -->
    <ul>
      <li v-for="item in listItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      listItems: ['buy food', 'play games', 'sleep'],
    }
  }
}
</script>

在这个组件中，列表项被储存在数组（listItems）里面。数据被传递到模板，而后被遍历（v-for），而后展示在页面上。

固然，咱们须要看到刚刚建立的列表，咱们能够建立一个新的路由来展现这个组件。在src/router/index.js中建立一个路由，添加完了代码应该是下面这样的：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import List from '@/components/List'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/to-do',
      name: 'ToDo',
      component: List
    },
  ]
})

如今，访问localhost:8080/#/to-do，能够看到咱们作的应用。

首先，咱们要测试的是数据的正确性。在test/unit/specs目录下建立一个List.spec.js，而且写入下面的代码：

import List from '@/components/List';
import Vue from 'vue';

describe('List.vue', () => {

  it('displays items from the list', () => {
      // our test goes here
  })
})

在这个文件中，咱们_describing_了List.vue组件，而且咱们建立了一个空的测试，他将要检查这个组件的列表展现。这是一个基本的 Mocha 测试文件。

咱们首先要安装咱们的Vue组件。复制下面代码放在测试文件的'our test goes here'下面：

// build component
const Constructor = Vue.extend(List);
const ListComponent = new Constructor().$mount();

咱们继承了Vue组件而且安装这个组件。安装组件很重要，只有这样咱们才能将经过模板来渲染HTML。也就是说，HTML已经被建立，而且咱们模板中的变量（好比 item）已经被填充内容，这样咱们就能够获取HTML了（使用$el）。

咱们的组件准备好了，咱们能够写第一个断言。在这个例子中，咱们使用Chai 断言库提供的 'expect' 模式，还有 'should' 和 'assert'模式。将下面的代码放到，启动组件的后面。

// assert that component text contains items from the list
expect(ListComponent.$el.textContent).to.contain('play games');

以前提到过，咱们可使用ListComponent.$el来获取组件的HTML，若是想去获取HTML内的内容（好比 文本），咱们可使用ListComponent.$el.textContent。这个断言用来检查HTML列表中的文本是否和组件的data里的数据列表吻合。

为了检查全部的事情都符合咱们的预期，咱们能够运行测试！经过 vue-cli 建立的项目，咱们能够简单的使用npm run unit来运行cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run。

npm run unit

若是测试都经过了，将会有一个绿色的列表来显示测试报告，让你了解测试都覆盖了哪些代码。

模拟用户输入

虽然前面的功能赞赞哒，但没有多少应用只是用来展现数据。下一步咱们要作到是添加新的项目到to-do list中。看这里，咱们建立了一个input框来输入内容，而后建立一个button用来提交内容。下面是更新后的 List.vue：

<template>
  <div>
    <h1>My To Do List</h1>
    </br>
    <input v-model="newItem" >
    <button @click="addItemToList">Add</button>
    <!-- displays list --> 
    <ul>
      <li v-for="item in listItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      listItems: ['buy food', 'play games', 'sleep'],
      newItem: ''
    }
  },
  methods: {
      addItemToList() {
        this.listItems.push(this.newItem);
        this.newItem = '';
      }
  }
}
</script>

使用v-model，输入框里面的内容将和newItem进行双向绑定。当按钮被点击后，执行addItemToList，将newItem添加到to-do list数组里面，而且清空newItem里面的内容，新的项目将会被添加到列表中。

能够为新功能写测试文件了，建立List.spec.js，而且添加如下测试代码。

it('adds a new item to list on click', () => {
    // our test goes here
})

第一步，咱们须要建立咱们的组件，而且模拟一个用户在输入框的输入行为。由于 VueJs 将输入框和 newItem 变量进行了绑定，咱们能够给newItem设置内容。

// build component
const Constructor = Vue.extend(List);
const ListComponent = new Constructor().$mount();

// set value of new item
ListComponent.newItem = 'brush my teeth';

下一步，咱们须要点击按钮。咱们须要在HTML中找到按钮，在$el中便可找到。这是，咱们可使用querySelector，像选择真是元素同样选择这个按钮。也可使用class(.buttonClass)、ID（#buttonID）或者标签名(button)来选择。

// find button
const button = ListComponent.$el.querySelector('button');

为了模拟点击，咱们须要给按钮一个新的事件对象。在测试环境中，List组件不会监放任何事件，所以咱们须要手动运行watcher。

// simulate click event
const clickEvent = new window.Event('click');
button.dispatchEvent(clickEvent);
ListComponent._watcher.run();

最后，咱们须要检查咱们添加的新项目是否显示在HTML中，这个在前面已经介绍过。咱们也须要检查newItem是否被存储在了数组里面。

//assert list contains new item
expect(ListComponent.$el.textContent).to.contain('brush my teeth');
expect(ListComponent.listItems).to.contain('brush my teeth');

下面是整个测试文件的内容：

import List from '@/components/List';
import Vue from 'vue';

describe('List.vue', () => {
  it('displays items from the list', () => {
    const Constructor = Vue.extend(List);
    const ListComponent = new Constructor().$mount();
    expect(ListComponent.$el.textContent).to.contain('play games');
  })

  it('adds a new item to list on click', () => {
    // build component
    const Constructor = Vue.extend(List);
    const ListComponent = new Constructor().$mount();

    // set input value
    ListComponent.newItem = 'brush my teeth';

    // simulate click event
    const button = ListComponent.$el.querySelector('button');
    const clickEvent = new window.Event('click');
    button.dispatchEvent(clickEvent);
    ListComponent._watcher.run();

    // assert list contains new item
    expect(ListComponent.$el.textContent).to.contain('brush my teeth');
    expect(ListComponent.listItems).to.contain('brush my teeth');
  })
})

如今跑一次这个测试，应该全是绿色的。

但愿你读这些代码的时候思路可以清晰，不过它对于刚刚开始接触VueJs单元测试的人来讲可读性并非很高。有一个VueJS实用程序库，它将一些复杂的代码进行了封装。若是想使用它，能够在项目的根目录下输入如下命令安装。

npm install avoriaz

下面这个测试实际上和上面测试相同，只不过写法上有些不一样。咱们使用了mount()法来安装Vue组件，使用find()获取按钮，使用dispatch()来触发点击。

import { mount } from 'avoriaz';
import List from '@/components/List';
import Vue from 'vue';

describe('List.vue', () => {
  // previous tests ..

  it('adds new item to list on click with avoriaz', () => {
       // build component
    const ListComponent = mount(List);

    // set input value
    ListComponent.setData({
      newItem: 'brush my teeth',
    });

    // simulate click event
    const button = ListComponent.find('button')[0];
    button.dispatch('click');

    // assert list contains new item
    expect(ListComponent.text()).to.contain('brush my teeth');
    expect(ListComponent.data().listItems).to.contain('brush my teeth');
  })
})

总结

在平常工做以及JavaScript开发中，尤为是VueJS项目，测试是很是重要的。由于刚开始接触测试的时候，我遇到了一些问题，因此总结出一篇文章供你们参考。但愿这篇文章可以帮到全部像我同样的人。

这个git库是此次教程全部的代码。