前端vue单元测试环境搭建（二）

前端vue单元测试环境搭建

说明

恕在下时间有限，最近才开始研究单元测试，所以要从头开始搭建一个包括mocha+karma+chai+Sinon这种完整的测试环境实在太过困难，因为目前所使用的开发框架是vue，所以直接使用vue-cli中帮我搭好了的mocha测试环境。这样我们只需要了解该如何使用mocha语法编写单元测试，以及学会使用chai断言库和使用sinon去mock我们的模块来帮我们完成单元测试的编写即可，至于vue-cli中是如何进行配置搭建mocha以及karma的，我们先缓一缓，后续有时间我再研究他们是如何从头搭建的。

ps：经过我踩坑无数，因为vue-cli3.0默认的mocha测试只含有mocha+chai，并没有karma，所以我为了和vue-cli进行整合，比如添加覆盖率功能，生成漂亮的报表功能，vue-cli3.0集成karma等等，配的我怀疑人生，如果在研究测试时能重新选择一次，我一定先研究Jest，因为据说他是零配置，不管是断言，覆盖率什么的都给你集成好了，难受

开始

创建带有mocha的vue项目

这里使用的是vue-cli3.0的版本，2.0的在这里注意可能水土不服，如果不熟悉cli的使用，先移步官网官网了解。

1. 运行vue create xxx命令

2. 在预设中选择Unit Testing

3. 然后在选择测试方案中选择Mocha + Chai

4. 等待安装完毕即可。

运行测试

文件目录

|-- 根目录
|   |-- tests
|   |   |-- unit
|   |   |   -- example.spec.js

也就是在根目录中的tests文件夹下的unit的examp.spec.js就是一个测试用例的例子，你所编写的测试用例可以根据功能模块来编写，并根据文件夹进行分门别类，以便后续维护，并且测试用例文件名要以.test.js或.spec.js结尾。

执行测试

在终端中运行如下代码来执行测试：

npm run test:unit

他会执行tests文件夹中的测试用例，并在控制台中打印，结果如下：

  HelloWorld.vue
    √ renders props.msg when passed (44ms)


  1 passing (53ms)

 MOCHA  Tests completed successfully

注意

在运行默认的vue-cli创建的test命令时，你可以在tests/unit文件夹中创建任意的测试文件，但是需要注意以下几点：

• 你创建的测试文件需要以.spec.(js|ts)结尾，我试过默认的vue-cil命令不能识别以.test.(js|ts)结尾的测试文件。

• 运行默认的npm run test:unit时，他只会查找tests/unit文件夹下的测试文件。

注意这两点，你就可以编写你的测试用例了，不过，在此之前，我们并不能满足于vue-cli提供的默认测试功能，我们需要让他更加完善，可以支持更多的功能，所以，我们一个个的研究如何扩展我们的测试吧。

完善

vue-cli提供的测试配置

vue-cli3.0中，提供了**@vue/cli-plugin-unit-mocha**插件来集成mocha的使用，具体可以查看GitHub。如果你初始化的vue-cli3.0的项目没有选择mocha测试，那么你直接使用cli添加此插件即可：

vue add @vue/unit-mocha

这样就和在一开始使用cli创建vue项目时选择mocha测试一致了。并且，他还会生成tests/unit/example.spec.js这个测试用例。并且，npm命令也会支持test:unit命令。

或者你可以直接安装@vue/cli-plugin-unit-mocha：

npm install --save-dev @vue/cli-plugin-unit-mocha

不过需要做一些额外操作：

• 你需要自行在根目录下创建tests/unit及测试用例

• 你需要手动在package.js的script字段中增加"test:unit": "vue-cli-service test:unit"命令

• 我测试时他好像没有安装chai断言库，所以我手动安装chai的，如果有一些库没有安装，你可以手动安装一下，与其这么麻烦，所以还是推荐使用直接添加插件的形式安装他较为妥当。

@vue/cli-plugin-unit-mocha提供的命令

其实英语好的看github上的介绍就好，我这里也看不出什么名堂（原谅我英语太差）。常用的感觉就下面这些：

  --watch, -w   运行文件监听模式，当测试用例或者测试用例的依赖文件更改时则重新执行测试。
  --grep, -g <pattern>   只运行匹配<pattern>的测试
  --timeout, -t 测试用例超时时间，默认2000