前端自动化测试Vue中TDD和单元测试示例详解
更新时间：2023年02月14日 10:30:37 作者：云牧
这篇文章主要为大家介绍了前端自动化测试Vue中TDD和单元测试示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1、简单用例入门
Vue 提供了 @vue/test-utils 来帮助我们进行单元测试，创建 Vue 项目的时候勾选测试选项会自动帮我们安装
先来介绍两个常用的挂载方法：
mount：会将组件以及组件包含的子组件都进行挂载shallowMount：浅挂载，只会挂载组件，忽略子组件
再来看一个简单的测试用例：
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 和快照的区别
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 命令，就能进行测试了：
"test:unit": "vue-cli-service test:unit --coverage"
执行命令会生成 coverage 文件夹，Icov-report/index.html 里会可视化展示我们的测试覆盖率
4、结合 Vuex 进行测试
如果我们在组件中引入了 Vuex 状态或者使用了相关方法
在测试用例里，挂载组件的时候只需要传入 vuex 的 store 即可
import store from "@/store/index";
const wrapper = mount(HelloWorld, {
store
});以上就是前端自动化测试Vue中TDD和单元测试示例详解的详细内容，更多关于Vue TDD单元测试的资料请关注脚本之家其它相关文章！
相关文章
vue3发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,这篇文章主要给大家介绍了关于vue3不同语法格式对比的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
项目为数据报表,但是一个父页面中有很多的子页面,而且子页面中不是相互关联,但是数据又有联系,所以本文给大家介绍了vue中如何实现子组件相互切换,而且数据不会丢失,并有详细的代码供大家参考,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vuex管理状态仓库使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在Vue项目中可以直接使用localStorage,它支持Vue2和Vue3,在Vue2中,可以通过`localStorage.setItem()`、`localStorage.getItem()`和`localStorage.removeItem()`来保存、读取和删除数据,本文给大家介绍vue中的localStorage使用详解,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue router-link下划线和颜色问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了在 Vue3 中使用 BabylonJs 开发 3D 是什么体验,在本文中，向您展示了如何创建 Vue 组件、Babylon 类、在画布上渲染场景以及创建 3D 网格，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了详解vue-meta如何让你更优雅的管理头部标签，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论