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

最新推荐文章于 2025-07-01 21:42:28 发布

原创

最新推荐文章于 2025-07-01 21:42:28 发布 · 5.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #单元测试 #mocha

本文介绍了如何在 Vue CLI 3.0 框架下搭建并扩展 Mocha 单元测试环境。从创建带有 Mocha 的 Vue 项目开始，详细讲解了如何运行测试、完善测试配置，包括 @vue/cli-plugin-unit-mocha 提供的命令、集成 Sinon 和其他测试工具，以及如何生成代码覆盖率报告。同时，文章讨论了在 Vue CLI 中使用 Karma 和 Istanbul 的挑战，建议在不需要浏览器测试的情况下，使用 JSDOM 在 Node 环境中运行测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前端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的使用，先移步官网官网了解。

运行vue create xxx命令
在预设中选择Unit Testing
然后在选择测试方案中选择Mocha + Chai
等待安装完毕即可。

运行测试

文件目录

|-- 根目录
|   |-- 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
  --bail, -b    当一个测试用例不通过时，后续测试用例无须执行。

而且，上面不够用没关系，他还支持所有的