本文介绍:
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 进阶部分

相关文档:
 
推荐文章:

使用 Jest 进行 Vue 单元测试的更多相关文章

  1. Vue 单元测试 使用mocha+jest

    目录 Vue 单元测试 mocha+jest jest 实例 mocha expect方法断言 示例代码 Vue 单元测试 官网:https://vue-test-utils.vuejs.org/zh ...

  2. Vue单元测试Karma+Mocha

    Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览 ...

  3. 使用Karma、Mocha实现vue单元测试

    Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试.换句话说,它是 ...

  4. 解决未安装unit测试和jest的Vue项目运行karma start时的错误

    一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...

  5. vue 单元测试

    单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试.它有很多社区版的插件,包括对webpack和browserify的支持. ...

  6. Vue单元测试vue2-jest-coverage的package.json 配置

     依赖的版本很重要,不要出错了 devDependencies:{ "babel-core": "^6.26.3", "babel-jest" ...

  7. Alpha-技术规格说明书

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-计划-功能规格说明书 一.架构与技术栈 1.整体架构 本项目的整体架构如上图所示.下面我们将对涉及 ...

  8. Beta-技术规格说明书

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-计划-功能规格说明书 一.架构与技术栈 1.整体架构 本项目的整体架构如上图所示.下面我们将对涉及 ...

  9. 前端单元测试,以及给现有的vue项目添加jest + Vue Test Utils的配置

    文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...

随机推荐

  1. springboot 项目的https的发布

    1.生成密钥证书 生成命令: keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize -keystore keysto ...

  2. 10.源码分析---SOFARPC内置链路追踪SOFATRACER是怎么做的?

    SOFARPC源码解析系列: 1. 源码分析---SOFARPC可扩展的机制SPI 2. 源码分析---SOFARPC客户端服务引用 3. 源码分析---SOFARPC客户端服务调用 4. 源码分析- ...

  3. 启xin宝app的token算法破解——frida篇(四)

    前两篇文章分析该APP的抓包.的逆向: 启xin宝app的token算法破解--抓包分析篇(一) 启xin宝app的token算法破解--逆向篇(二) 启xin宝app的token算法破解--toke ...

  4. ionic app 优化三件套,让其更贴近原生app

    这里推荐一个ionic大神的简书,里面有好多关于好多ionic的技术分享! http://www.jianshu.com/u/c2e637a941ef 捣鼓了好久的ionic,终于在优化过程终于有所进 ...

  5. excel表格导出之后身份证号列变成了科学计数法

    excel表格导出之后身份证号列变成了科学计数法 解决:写sql查询出所有数据,并在身份证列添加字符,然后导出,将要复制的excel表格设置单元格格式问文本类型,然后复制粘贴,再把加入的字符删除,搞定 ...

  6. unity shader 纹理&透明效果

    1.纹理映射基础 (1)纹理映射通过(u,v)坐标实现.注意:这句话时博主当时面试一家外企被问到的问题. (2)添加纹理属性:——MainTex("Main Tex",2D)=&q ...

  7. Python 内存分配时的小秘密

    Python 中的sys 模块极为基础而重要,它主要提供了一些给解释器使用(或由它维护)的变量,以及一些与解释器强交互的函数. 本文将会频繁地使用该模块的getsizeof() 方法,因此,我先简要介 ...

  8. 初识云计算 -《AWS云端企业实战圣经》读书笔记

    原书中涉及实操的地方,在本文中被省略.一是篇幅太长,放入文中太过累赘,二是原书成书过早,现在 AWS 的界面早已变化很大,不具备参考性. 第一章 谁在使用云计算 1.什么是云计算 云计算(cloud ...

  9. JUC包Lock机制的支持--AQS

    在上一次总结中,提到了JUC包下使用Lock接口实现同步的方法,以及和Synchronized关键字的一些比较,那么使用Lock完成锁机制的底层支持又是什么呢?总结如下: 1 AQS是什么 AQS是一 ...

  10. 用户数从 0 到亿,我的 K8s 踩坑血泪史

    作者 | 平名 阿里服务端开发技术专家 导读:容器服务 Kubernetes 是目前炙手可热的云原生基础设施,作者过去一年上线了一个用户数极速增长的应用:该应用一个月内日活用户从零至四千万,用户数从零 ...