jset编写测试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: 'foo'
}
})
// 这里通过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 进阶部分
相关文档:
推荐文章:
jset编写测试vue代码_使用 Jest 进行 Vue 单元测试相关推荐
- python编写高质量代码_用 Python 编写干净、可测试、高质量的代码
用 Python 编写干净.可测试.高质量的代码 Noah Gift 2010 年 12 月 20 日发布 简介 编写软件是人所承担的最复杂的任务之一.AWK 编程语言和 "K and R ...
- 如何编写无法维护的代码_编写可维护的前端代码
点击这里获得更好的阅读体验github.com 以下是本人在团队内部分享的整理和补充,水平有限,如有错误,请不吝赐教. 大家好,我叫王力国,目前是 RPA 前端团队负责人,过去一年我们从零构建了 R ...
- java编写排序的代码_在Java 8之前,您编写了几行代码来对对象集合进行排序?...
java编写排序的代码 在Java 8之前,您编写了几行代码来对对象集合进行排序? Java 8您需要多少个? 您可以在Java 8中用一行完成. 让我们看看下面的Employee类. public ...
- python怎么测试c代码_如何正确测试python中的C-API,C-API返回错误代码
我的设置 我正在使用Python中的pytest和ctypes测试C库中的函数.C库中的每个函数调用一个嵌入式linux PCI板上的函数,然后C库函数返回一个整数,该整数映射到一组返回代码.如果函数 ...
- vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件 安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
- jset编写测试vue代码_详解使用jest对vue项目进行单元测试
最近领导对前端提出了新的要求,要进行单元测试.之前使用vue做了一个快报名小程序的pc端页面,既然要做单元测试,就准备用这个项目了,之前有些react的经验,vue还是第一遭 vue-cli3.0单元 ...
- nexttick使用场景_使用Jest实现Vue自动化测试
前言 在开始前,我们先来聊一下什么是自动化测试.通常,在需求确定以后,测试会编写测试用例,然后,根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较.在此过程中,为了节省人力.时间或硬 ...
- 如何编写无法维护的代码_如何写出让同事无法维护的代码?
程序命名 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1,a2,a3,a4,-.) 有创意地拼写错误.比如:SetPintleOp ...
- filter vue 循环_详解在Vue.js编写更好的v-for循环的6种技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. {{ product.name }} 但是,在本文中,我将介绍六种方法 ...
最新文章
- 3000+ NLP资源一网打尽,只需用这个分类检索网站 | 免费
- Linux快捷键-命令行下
- springmvc 传递和接收数组参数
- Spring boot(八):RabbitMQ详解
- mongodb4简明笔记
- 算法之最长公共子序列(LCS)问题
- 系统学习 TypeScript(一)——认识 TypeScript
- WINCE--修改MAC地址
- 网站抓取精灵V3.0正式版
- s-msckf代码笔记(二)
- 小米手机扩容教程_小米笔记本硬盘扩容教程:5分钟搞定,存储容量瞬间翻倍...
- SLG手游Java服务器的设计与开发——数据管理
- [C++] 栈的压入、弹出序列
- Android Jetpack之DataBinding+ViewModel+LiveData+Room
- 小程序 formid 生成_微信电子计次卡生成小程序
- 宽温Android触摸屏,7寸刷卡工控一体机支持IC/ID卡安卓触摸屏
- can总线短距离不用双绞线_CAN 总线(一) 物理层—屏蔽双绞线
- origin2021下载安装教程附文件
- 在国企的日子(第三章下部 出差)
- 论文阅读:A ConvNet for the 2020s
热门文章
- Acronis True Image无法卸载或者卸载导致无法开机解决办法
- savexml php,PHP DOMDocument saveXML()用法及代码示例
- 基于java的学生点名系统_基于javafx的学生电子点名系统(在eclipse中编写完成)...
- evans pde 第三章_智慧树报关实务第三章答案
- java poi导入50万数据_java从oracle读取50万条数据写入Excel中抛GC overhead limit exc
- Java txt 下拉刷新_手写上拉加载,下拉刷新(小demo)
- signature=806a32b3c900efe2c25fc19c92754ca3,Signature de câble électronique
- Lex-BERT:超越FLAT的中文NER模型?
- Shorten command line 解决方案
- phpstorm运行java项目_phpstorm的提速设置