Vue 全家桶单元测试简要指南

此文已由作者张汉锐授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

vue 的单元测试环境

按照目前全家桶的情况，是需要 webpack 的支持的。可以直接使用 vue-cli ，选择 webpack 模版，里面会有完整的单元测试 & 端对端测试的配置。如果想要自己配置，则在配置完基本的 karma 测试环境之后，将 webpack 加入到 preprocessor 上。

测试覆盖率

同理 vue-cli 的 webpack 模版已经做的很完善了。如果不想用全家桶，在不需要 babel 编译的情况下，单元测试覆盖率的计算，可以通过 istanbul 实现，具体可以看 istanbul 文档。但如果需要经过 babel 编辑的话，就需要借助 babel-plugin-istanbul。

vue 组件（文件）的单元测试

主要考虑几个点：

• 组件的方法测试

• 组件 props 的测试

• 组件 UI 的更新测试（异步的）

• 组件通信的测试

具体参考官网 Unit Testing ，里面提供了很清晰的例子，这里就不做搬运工了。

vuex 的单元测试

vuex 的测试相对简单，vuex 主要的测试对象就是 mutation, action, getter 这些。其中 ：

• mutation：接受一个 state 为参数，并改变state 的属性。 所以测试时候时候，mock 一个 state，接着调用 mutataions，断言一下 state 的变化是否是预期的。

• action： 这个比较绕，他可以 commit 多个 mutataion，也可以异步， 所以测试目标就变成了 action 每一个 commit 是否正确。思路上，mock 一个 commit 函数，在 commit 函数中记录每次 mutaion 的 type 和数据，然后和期望的对比。

• getter：略

PS: 如果 mock  ajax 或者 setTimeout, setInterval 这些，可以使用 mock 库 sinon ，关键词 spy，stub，fakeServer 。

关于 vuex 单元测试的详细列子说明，可以参考 官网的文档 Unit Testing

vue + vuex 的单元测试

也就是：vue 组件中依赖了 vuex 的 mutation, actions, getters 的时候 ，vue 如何做测试比较好。

vue-loader 文档 给出了方法。

首先，社区有个 inject-loader 能够 mock 依赖，看看下面例子

// log.jsvar myUtils = require('./utils');

myUtils.log('hi');// test.jsvar inject = require('!!vue-loader?inject!./log.js')var myLog = inject({  './utils':{
    log(){      //....
    }
  }
})

inject-loader 能够在加载 log.js 时候，允许我们 mock log.js 的依赖。所以当组件依赖 vuex 的时候，就可以通过 inject-loader 来 mock 依赖，从而方便将 vuex 和 vue 组件的测试分开。

具体的原理和使用方法，可以看上面给出的文档。

（注意，文档说的 [email protected] is currently unstable ，文档演示的例子也是提示安装 2.0 ，实际上现在 3.0 已经稳定了，参考这里。使用 2.0 反而问题多多）

其他

参考资料：

• sinon

• chai 可以选择不同的断言库，咱么选用的是 expect

tips：记得安装 sinon，chai 的 types 文件，写起测试来会很爽

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 网易严选的wkwebview测试之路
【推荐】 类似gitlab代码提交的热力图怎么做？
【推荐】 网易云社区开年活动：人工智能热门图书大抽奖！