教你如何编写Vue.js的单元测试的方法

如上所述，我们可以使用ListComponent.$el获取组件的HTML，并且使用ListComponent.$el.textContent只访问内部HTML（即文本）。断言是检查文本是否包含在组件数据中设置的列表项之一。

为了检查一切都能正常工作，我们可以运行测试！使用vue-cli项目，我们可以简单地输入npm run unit，这是一个别名 cross-env BABEL_ENV = test karma start test/unit/karma.conf.js –single-run。

npm run unit

如果所有的测试都已经通过，它将显示绿色，并显示成功测试和代码覆盖率报告的列表，让您知道在测试期间执行的应用程序代码的百分比。

模拟用户输入

这是一个很好的开始，但是很少有应用程序只会显示数据。我们要添加的下一个功能是让用户能够在其列表中添加新项目。为此，我们需要一个输入框，用户可以在其中键入新项目，并在按钮上添加项目到列表中。这是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添加到列表数组中，并清除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来查找实际的元素。可以使用它的类（.buttonClass），其id（#buttonId）或元素的名称（button）来找到一个元素。