使用 Jest 进行 Vue 单元测试
时间:2019-09-26
本文章向大家介绍使用 Jest 进行 Vue 单元测试,主要包括使用 Jest 进行 Vue 单元测试使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍:
1、vue-cli3下jest环境的搭建
2、vue组件基本的测试方法环境配置
vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加插件’,搜索 @vue/cli-plugin-unit-jest,点击安装就可以了,对应命令行的 vue add @vue/cli-plugin-unit-jest 命令;这个过程实际上是包含了安装和调用两个步骤,并且会把相关的依赖一并安装进来,这样就不需要自己一个一个的安装每个依赖了。安装完成后,会发现package.json 文件里多了这些依赖在根目录会发现新生成了一个 test 文件夹,里面有一个 .spec.js 后缀的示例文件,用 packgae.json 里的 test:unit 指令直接运行,就可以调用 jest 的测试了,系统会匹配所有 .spec.js 或者 .test.js 后缀的文件并执行期中的代码,正常的结果如下。环境配置到这里基本就结束了。vue 单文件测试案例
下面我通过一个简单的 vue组件 来介绍最基础的测试用例编写,以element-ui 的 alert 组件为例,对于一个vue 组件,核心的测试指标因该是 props 接口,alert.vue 文件内定义了下面几个 prop:我的测试代码如下,讲解部分都写到了注释里:import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper import Alert from '@/components/alert/index.vue'; // 引入组件 describe('Alert', () => { // describe 代表一个作用域 it('create', () => { // ‘creat’ 这里只是一个自定义的描述性文字 const wrapper = mount(Alert, { // 通过 mount 生成了一个包裹器,包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法 propsData: { title: 'title', showIcon: true } // 可以带参数,这里我通过 propsData 传递了接口数据 }) expect(wrapper.find('.el-alert__title').text()).toEqual('title'); expect(wrapper.vm.visible).toBe(true); // .vm 可以获取当前实例对象,相当于拿到了 vue组件里的 this 对象 // find()可以匹配各种类型的选择器,类似于选中 DOM, text() 就是获取其中的内容 // toEqual 是一个断言,判断结果为 ‘title’ 时,通过测试,否则猜测是失败 }); it('type', () => { const wrapper = mount(Alert, { propsData: { title: 'title', showIcon: true, type: 'success' } }) expect(wrapper.classes('el-alert--success')).toBe(true); // classes() 方法,返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值 // toBe 和toEqual 类似,区别在于toBe 更严格限于同一个对象,如果是基本类型则没什么区别 }); it('description', () => { const wrapper = mount(Alert, { propsData: { title: 'Dorne', description: 'Unbowed, Unbent, Unbroken', showIcon: true } }) expect(wrapper.find('.el-alert__description').text()).toEqual('Unbowed, Unbent, Unbroken'); }); it('title slot', () => { const wrapper = mount(Alert, { propsData: { title: 'Dorne' }, slots: { title: '<span>foo</span>' } }) // 这里通过slots 属性,添加了一个 slot 插槽,然后来判断插槽内容是否正确渲染进去了 expect(wrapper.find('.el-alert__title').text()).toEqual('foo') }); it('close', () => { const wrapper = mount(Alert, { propsData: { title: 'test' } }) wrapper.find('.el-alert__closebtn').trigger('click') expect(wrapper.vm.visible).toBe(true) // trigger()可以触发一个事件,这里模拟了点击 }); });
上面的 测试用例,覆盖了 alert 组件的 prop 和 click 事件,这些是 vue 单文件测试中的最常用的部分,执行下 npm run test:unit 看下效果表格里的是关于代码覆盖率的指标,默认是关闭的,需要在jest.config.js 中配置下,"collectCoverage": true, "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
Test Suites 为一组集合,通常一个测试文件对应一个 Test Suites, Tests 为所有测试实例的个数,我们这里所有的测试实例都通过了测试,所以显示 passed,如果有某个 test 测试失败,会有 fail 输出:Okay,以上就是 jest 在 vue 项目中的简单应用,希望对你有帮助。Jest 进阶部分
相关文档:推荐文章:
原文地址:https://www.cnblogs.com/zhoumingjie/p/11589469.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第十八篇 zabbix创建自定义报警媒介
- 原创|如果懂了HashMap这两点,面试就没问题了
- RTSP协议网络摄像头互联网直播开源流媒体平台
- RTSP协议网页无插件播放,匿名登录不显示设备资源如何解决?
- 设计模式~代理模式
- Linux工具入门:make工具与Makefile文件
- PF_RING的多种负载均衡方法
- 【拓展】686- 如何在 Web 上大规模生成 UUID
- Linux进程管理与性能监控
- 重学数据结构(一、线性表)
- Jmeter系列(49)- 详解 HTTP Cookie 管理器
- java.lang.ClassNotFoundException:org.springframework.web.context.ContextLoaderListener问题解决
- ELK + Filebeat + Kafka 分布式日志管理平台搭建
- 一切皆是文件:UNIX,Linux 操作系統的設計哲學
- 【JS】687- 几行代码摸清楚上拉加载原理