vue的自动化测试详解(二)

简介: vue的自动化测试详解

测试覆盖率

jest⾃自带覆盖率,如果⽤用的 mocha,需要使⽤用 istanbul来统计覆盖率

package.json⾥里里修改 jest配置

jest: {
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,vue}"],
  }

倘若有个jest.config.js那么就在 moduleFileExtensions 上一行加入,这个文件是对jest的配置

"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"],

在跑一下npm run test:unit

847c336c27ec93b3e28a3790206473d8.jpg

生成的报告文件在coverage目录下,打开可以看到这么个鬼东西


0e1fdcbefb67419f15598f1f2105422f.jpg


这个测试报告可以很精确的看到我们哪些没测试,哪些测试了,我在KaiKeBa里加点东西不测试,来看看结果


555f7d696a01365ff64e11fc0b3d84c1.jpg


蓝色的我们可以点进去的


1d21e5dbf865da5dbe9c8328a1e119aa.jpg


指出了没有测到的地方,判断了newData是否等于1,显然不等于的


我们可以给他测试下,要这么写,给newData赋值

it('测试点击后,newData == "1"的结果',() => {
        // $mount处理不了用户交互,所以我们要用到vue官方推荐的@vue/test-utils
        let wrapper = mount(KaiKeBaComp)
        wrapper.vm.newData = '1'
        //点击一下
        wrapper.find('.btn').trigger('click')
        expect( wrapper.vm.msg ).toBe('click false')
    })

7854e75a78b10f6a892755104fef0d34.jpg



相关文章
|
25天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
37 2
|
3月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
63 1
|
9月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的办公自动化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的办公自动化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
5月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
369 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
4月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1291 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
4月前
|
JavaScript
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
43 3
|
9月前
|
JavaScript Java 测试技术
大学生体质测试|基于Springboot+vue的大学生体质测试管理系统设计与实现(源码+数据库+文档)
大学生体质测试|基于Springboot+vue的大学生体质测试管理系统设计与实现(源码+数据库+文档)
146 0
|
5月前
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
929 0
vue配置生产环境.env.production、测试环境.env.development
|
4月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
65 0