前端自动化测试Vue中TDD和单元测试示例详解
导读:收集整理的这篇文章主要介绍了前端自动化测试Vue中TDD和单元测试示例详解,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录1、简单用例入门2、快照测试3、覆盖率测试4、结合 Vu...
收集整理的这篇文章主要介绍了前端自动化测试Vue中TDD和单元测试示例详解,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录
- 1、简单用例入门
- 2、快照测试
- 3、覆盖率测试
- 4、结合 Vuex 进行测试
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单元测试的资料请关注其它相关文章!
您可能感兴趣的文章:- vue前端测试开发watch监听data的数据变化
- springboot vue测试平台开发调通前后端环境实现登录
- springboot vue测试前端项目管理列表分页功能实现
- springboot vue测试平台前端项目查询新增功能
- springboot vue接口测试HutoolUtil TreeUtil处理树形结构
- springboot vue接口测试前后端树节点编辑删除功能
- springboot vue接口测试前端动态增删表单功能实现
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 前端自动化测试Vue中TDD和单元测试示例详解
本文地址: https://pptw.com/jishu/609268.html