译者：明非

链接：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库是此次教程统统的代码。