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

Vue.js是一个JavaScript框架，可用于构建Web应用程序的前端框架。特别是在创建复杂功能时，对于每个项目，有必要在我们的应用程序中查看所有内容，并检查它是否符合预期。然而，对于大型项目，每次新的更新后，检查每个功能将变得很麻烦。因此，我们可以创建可以一直运行的自动化测试，并保证我们的代码可以正常运行。在本文中，我们将为VueJS创建一些简单的单元测试。

要进行测试，我们将先制作一个基本的待办事项列表组件。我们将测试该列表是否正确显示，并且用户可以将新项目添加到待办事项列表中。希望在本教程结束之前，您可以编写测试，检查您的组件输出给用户，以及通过与HTML进行交互来模拟用户操作（例如通过单击按钮）。

本文中的所有代码可以在 Github 下载。

搭建环境

搭建JavaScript项目可能是一个复杂的过程。有那么多库需要选择，所有这些库的目的都略有不同。幸运的是，对于VueJS，我们有vue-cli，它为我们设定了一切！您需要首先安装npm，然后可以运行以下命令：

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

在这个阶段，你会被提示几个问题。大多数都可以直接继续，您可以选择默认选项，唯一的要求是您回答YES以包括vue-router和YES来设置Karma和Mocha的单元测试。然后安装依赖项：

cd project-namenpm install

这个最终命令将启动您的浏览器并打开localhost运行您的应用程序：

npm run dev

下面是对vue-cli为我们设置的一些关键依赖关系（非常重要）的简要概述，包括为我自己的项目安装的版本。

依赖

Webpack (v2.3) 是一个捆绑器，它结合了各种JavaScript，CSS，HTML（和其他）文件，使他们可以随时由客户端处理。
Babel (v6.22) 是ECMAScript 6到ECMAScript 5的编译器。这些是不同的JavaScript标准，目前的浏览器不能解析所有的ECMAScript 6，因此需要进行转换。

测试依赖关系

Karma (v1.4) 是一个测试运行器，它运行一个Web服务器，其中包含项目的应用程序代码，并对其执行测试。

Mocha (v3.2) 是JavaScript的测试框架。
Chai (v3.5) 是可以与Mocha一起使用的断言库。

在您的项目中，您应该能找到以下文件夹：build，config，node_modules，src，static和test。对本文来说，重要的是src，它将保存我们的应用程序代码并进行test。

我的第一个测试

一个好的开始需要去做一些基本工作。我们将从创建简单列表组件开始。在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>