前言
官网虽有测试例子，但涉及较窄，遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从哪下手。
这篇文章结合实际项目，旨在解决上述问题，顺便记录写测试文件时遇到的一些问题，希望对各位朋友有所帮助。
当然，最重要的问题是：为什么要写测试？
于我，大概就是：如果写测试不是为了装逼，那将毫无意义 对写的程序更自信吧。
环境
vue-cli@2.9.2 配置 Jest 测试；
使用插件 vue-test-utils ，提供丰富的 api ，Vue 团队维护 。
代码语言：javascript复制正常情况下，test 目录如果像下图一样，那么接下来就可以在 spaces 文件夹里编写测试用例了。
简单组件实例
template 部分
代码语言：javascript复制script 部分
代码语言：javascript复制编写测试用例
代码语言：javascript复制mock action and state
在这个组件里，会调用 Vuex action ，以及 state ，为了完成测试，需要给 Vue 传递一个伪造的 Store 。
代码语言：javascript复制getter, mutation 同理。
mock router
当组件中使用 route 或者 router 时，并不推荐安装 Vue Router，因为安装之后也只是在 Vue 的原型上添加 route 和 router 只读属性，这意味着伪造 route 或 router 都会失效。取而代之，只需 mock route 和 mock router。
代码语言：javascript复制测试计算属性 logining
代码语言：javascript复制submit 方法测试
在这个简单组件中，需要测试 input 键盘按下，以及 button 点击是否触发 submit 方法。
代码语言：javascript复制mock funcion
最简单的 mock function 的写法，在上文中已经写出：jest.fn() 。
如果要指定返回内容，可以写成以下方式：
代码语言：javascript复制在实际应用里，请求结果的不确定性，以致并不能用以上方法来 mock 请求。
查阅相关资料后，发现如下方法，可以满足一个方法，输出不同结果的需求。
代码语言：javascript复制用于例子组件中，只需改动测试的 action 即可：
代码语言：javascript复制编写测试：
代码语言：javascript复制测试快照
jest 有一个提供快照的功能，它能够将某个状态下的 html 结构以一个快照文件的形式存储下来，以后每次运行快照测试的时候如果发现跟之前的快照测试的结果不一致，测试就无法通过。
如果页面确定需要改变，只需要运行测试的时候加上 -u 参数，更新快照即可。
第一次运行快照时，会创建一个 __snapshots__ 目录存放快照文件。
其他
诸如 props ，emit 的测试， vue-test-utils 上已经有详细的例子了，也就不再重复。
这里有测试的例子： https://github.com/j... 。
参考
- https://vue-test-uti...
- https://facebook.git...
- https://alexjoverm.g...
