前言：关于vue-cli的单元测试之路
一 安装
首页我们在安装的时候要注意一些步骤 （先确保你已经安装了node）
1.安装vue-cli npm install --global vue-cli
输入vue -V 如出现版本号证明已经安装成功
2 执行命令 vue init webpack 项目名称 在安装过程中会有一些选项 这里主要注意和单元测试相关的选项选择
其中会有一条是否安装单元测试 选择yes 并设置Karma和Mocha的单元测试
安装完成 我们可以执行npm run dev 将项目跑起来 这个时候我们再来看看文件目录 这里我们主要看两个目录
src 和test目录 src是我们的代码操作区域 test目录是我们写单元测试的目录
好了 这样我们的准备工作就完成了
二 一个简单的单元测试
我们可以在src/components目录下建一个List.vue的文件 并将以下代码复制进去（符合语法的代码都可以）
并在router/index.js里面配置路由 这个很简单就不多说了 使我们能访问到这个页面如 http://localhost:8080/#/List
另外我们再到test目录下打到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
})
})
在这个文件中，我们描述List.vue组件，我们有一个单独的空测试，它将检查它（组件）是否从列表中显示项目。这是Mocha测试的基本文件结构。
在我们的测试中，我们首先需要设置Vue组件。复制下面的代码，并将其放在注释“our test goes here”的位置：
// build componentconst Constructor = Vue.extend(List);const ListComponent = new Constructor().$mount();
我们扩展Vue然后安装我们的组件。安装组件很重要，因为这是在我们的模板中呈现HTML。这实际上意味着HTML被构建，并且我们的模板中的变量（例如{{item}}）被填满数据，使得我们可以访问HTML（通过$el）。
随着我们的组件准备好，我们可以写第一个断言。在这个例子中，我们使用了’expect’风格，由Chai断言库提供，以及’should’和’assert’。 安装组件后放置以下代码：
/ assert that component text contains items from the listexpect(ListComponent.$el.textContent).to.contain('play games');
为了检查一切都能正常工作，我们可以运行测试！使用vue-cli项目，我们可以简单地输入npm run unit
这个时候我们会发现报错
这个时候不要急 我们可以到http://phantomjs.org/download.html 这个网址下先去下载好 phantomjs-2.1.1-windows.zip这个包
把这个包解压后放在任意盘里面 然后把解压的文件里面的bin目录 配置在环境变量里面 （用户变量PATH）
检查是否配置成功 打包cmd 输入 phantomjs -v 如出现版本号 说明配置成功
这个时候再到vue cli 项目下 npm install 一下 再 npm run unit 我们就可以看到
这个时候就是单元测试跑成功了
好的 这个时候就是我们第一个简单的单元测试 接下来我们看一下单元测试里面的代码是怎么写的
（1）模拟用户输入
这是一个很好的开始，但是很少有应用程序只会显示数据。我们要添加的下一个功能是让用户能够在其列表中添加新项目。为此，我们需要一个输入框，用户可以在其中键入新项目，并在按钮上添加项目到列表中。这是List.vue的更新版本：
要开始测试此功能，请在List.spec.js中创建一个新的空测试，并添加测试代码：
it('adds a new item to list on click', ()=> {
// our test goes here
})
首先我们要构建我们的组件，并模拟一个用户在输入框中输入的内容。由于VueJS将输入框的值绑定到newItem变量，所以我们可以简单地将我们的值设置为newItem。
// build componentconstConstructor = Vue.extend(List);constListComponent =newConstructor().$mount();// set value of new itemListComponent.newItem ='brush my teeth';
接下来我们需要点击按钮。我们必须在HTML中找到这个按钮，它可以使用$el。只有这一次，我们才可以使用querySelector来查找实际的元素。可以使用它的类（.buttonClass），其id（#buttonId）或元素的名称（button）来找到一个元素。
// find buttonconstbutton = ListComponent.$el.querySelector('button');
为了模拟一个点击，我们需要将按钮传递给一个新的事件对象。在测试环境中，List组件不会监听任何事件，因此我们需要手动运行监视器。
// simulate click eventconstclickEvent =newwindow.Event('click');button.dispatchEvent(clickEvent);ListComponent._watcher.run();
最后，我们需要检查newItem是否显示，我们已经知道如何从第一个测试中完成！我们可能还想检查newItem是否存储在列表数组中。
//assert list contains new itemexpect(ListComponent.$el.textContent).to.contain('brush my teeth');
expect(ListComponent.listItems).to.contain('brush my teeth');
以下是完整的测试文件：
现在我们可以再次运行我们的测试 npm run unit，应该会显示绿色！
