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 反而问题多多）
其他
参考资料：
sinon
chai 可以选择不同的断言库，咱么选用的是 expect
tips：记得安装 sinon，chai 的 types 文件，写起测试来会很爽
免费体验云安全(易盾)内容安全、验证码等服务
更多网易技术、产品、运营经验分享请点击。
相关文章：
【推荐】 聊聊WS-Federation
以上是 Vue 全家桶单元测试简要指南 的全部内容， 来源链接： utcz.com/z/378906.html
