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 组件的测试分开。

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

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