1、简单用例入门

Vue 提供了 @vue/test-utils 来帮助我们进行单元测试，创建 Vue 项目的时候勾选测试选项会自动帮我们安装

先来介绍两个常用的挂载方法：

• mount：会将组件以及组件包含的子组件都进行挂载
• shallowMount：浅挂载，只会挂载组件，忽略子组件

再来看一个简单的测试用例：

1 2 3 4 5 6 7 8 9 10 11

import { shallowMount } from "@vue/test-utils"; import HelloWorld from "@/components/HelloWorld.vue"; describe("HelloWorld.vue", () => {   it("renders props.msg when passed", () => {     const msg = "new message";     const wrapper = shallowMount(HelloWorld, {       propsData: { msg }     });     expect(wrapper.props("msg")).toBe(msg);   }); });

shallowMount 会返回一个 wrapper，这个 wrapper 上面会包含很多帮助我们测试的方法，参考：v1.test-utils.vuejs.org/zh/api/wrap…

2、快照测试

测试用例写法如下： 第一次测试会保存 wrapper 的快照，第二次会比较当前 wrapper 和快照的区别

1 2 3 4 5 6 7 8 9

describe("HelloWorld.vue", () => {   it("renders props.msg when passed", () => {     const msg = "new message";     const wrapper = shallowMount(HelloWorld, {       propsData: { msg }     });     expect(wrapper).toMatchSnapshot();   }); });

3、覆盖率测试

覆盖率测试是对测试完全程度的一个评估，测试覆盖到的业务代码越多，覆盖率越高

在 jest.config.js 中我们可以设置 collectCoverageFrom，来设置需要进行覆盖率测试的文件

我们可以测试所有的 .vue 文件，忽略 node_modules 下所有文件

要注意，在 Vue 中配置 jest，参考：v1.test-utils.vuejs.org/zh/guides/#…

然后添加一条 script 命令，就能进行测试了：

1	"test:unit": "vue-cli-service test:unit --coverage"

执行命令会生成 coverage 文件夹，Icov-report/index.html 里会可视化展示我们的测试覆盖率

4、结合 Vuex 进行测试

如果我们在组件中引入了 Vuex 状态或者使用了相关方法

在测试用例里，挂载组件的时候只需要传入 vuex 的 store 即可

1 2 3 4

import store from "@/store/index"; const wrapper = mount(HelloWorld, {   store });

​现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：485187702【暗号：csdn11】

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！ 希望能帮助到你！【100%无套路免费领取】