vue+jest+vue-test-utils 单元测试
jest是Facebook的一套开源的JavaScript测试框架，它集成了快照测试、断言、mock以及覆盖率报告等功能，很全面而且基本不需要太多的配置便可使用Vue-Test-Utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。
这里讲的主要是Vue+Jest+Vue-Test-Utils的项目，假设现在你已经使用vue-cli3搭建了一个vue项目：
1.安装jest
npm install --save-dev jest @vue/test-utils
//package.json
"scripts": {
"test": "jest",
}
2.vue-jest
vue-jest是一个 预处理器，如果不安装vue-jest，jest无法处理.vue
npm install --save-dev vue-jest
3.配置jest
在src/test目录新建jest.conf.js配置文件，目录如下：
我的配置内容如下：
const path = require('path');
module.exports = {
verbose: true,
testURL: 'http://localhost/',
rootDir: path.resolve(__dirname, '../../../'),
moduleFileExtensions: [
'js',
'json',
'vue',
],
testMatch: [ // 匹配测试用例的文件
'<rootDir>/src/test/unit/specs/*.spec.js',
],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
};
4.配置之后就可以开始写测试用例了
在spec目录下新建一个ATest.spec.js文件（jest的测试脚本为.spec.js为后缀）
//ATest.vue组件
<template>
<div>
<Checkbox class="checkAlls" @on-change="checkboxChange" v-model="checkAll">全选</Checkbox>
</div>
</template>
<script>
export default {
name: 'ATest',
data() {
return {
checkAll: false,
};
},
methods: {
checkboxChange(value) {
this.$emit('on-change', value);
},
},
};
</script>
ATest.spec.js测试文件
import { mount, createLocalVue } from '@vue/test-utils';
import ATest from '@/components/ATest.vue';
import iviewUI from 'view-design';
const localVue = createLocalVue();
localVue.use(iviewUI);
describe('ATest.vue',()=>{
const wrapper =mount(ATest, {
localVue
});
it("事件被正常触发",()=>{
const stub = jest.fn();
wrapper.setMethods({ checkboxChange: stub });
//触发自定义事件
wrapper.find(".checkAlls").vm.$emit("on-change");
wrapper.setData({checkAll: true});
expect(wrapper.vm.checkAll).toBe(true);
})
})
5.vue-test-utils常用的API
- mount()
创建一个包含被挂载和渲染的 Vue 组件的 wrapper,它仅仅挂载当前实例
- shallowMount()
和 mount 一样，创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，只挂载一个组件而不渲染其子组件 (即保留它们的存根),这个方法可以保证你关心的组件在渲染时没有同时将其子组件渲染，避免了 子组件可能带来的副作用（比如Http请求等）
mount和shallowMount区别的案例解释
//App.vue
<template>
<div id="app">
<Page :messages="messages"></Page>
</div>
</template>
//子组件
<template>
<div>
<p v-for="message in messages" :key="message">{{message}}</p>
</div>
</template>
//测试用例App.spec.js
import { mount } from 'vue-test-utils';
import App from '@/App';
describe('App.test.js', () => {
let wrapper;
let vm;
beforeEach(() => {
wrapper = mount(App);
vm = wrapper.vm;
wrapper.setProps({ messages: ['Cat'] })
});
// 为App的单元测试增加快照（snapshot）：
it('has the expected html structure', () => {
expect(vm.$el).toMatchSnapshot()
})
});
执行单元测试后，测试通过，然后Jest会在test/__snapshots__/文件夹下创建一个快照文件App.spec.js.snap
exports[`App.test.js has the expected html structure 1`] =
` <div id="app" > <div> <p> Cat </p> </div> </div> `;
//通过快照我们可以发现，子组件Test1被渲染到App中了。
将App.spec.js中的mount方法更改为shallow方法，再次查看快照
exports[`App.test.js has the expected html structure 1`] =
` <div id="app" > <!----> </div> `;
//可以看出来，子组件没有被渲染
该案例的详细解释可以看这篇文章： https://blog.csdn.net/duola8789/article/details/80434962
- createLocalVue
返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类
import { createLocalVue, shallowMount } from '@vue/test-utils'import Foo from './Foo.vue'
const localVue = createLocalVue()const wrapper = shallowMount(Foo, {
localVue,
mocks: { foo: true }})expect(wrapper.vm.foo).toBe(true)
const freshWrapper = shallowMount(Foo)expect(freshWrapper.vm.foo).toBe(false)
- 选择器 (详细看Vue-Test-Utils官网介绍)
- $route 和 $router
import { mount} from '@vue/test-utils'
import Test from '@/components/common/Test.vue';
describe('Test.vue',()=>{
const wrapper = mount(Test, {
mocks: {
$route: { path: '/login' }
}
})
it("test", ()=>{
expect(wrapper.vm.$route.path).toMatch('/login')
})
})
- 状态管理Vuex
import Vuex from 'vuex';
import {mount, createLocalVue} from '@vue/test-utils'; const localVue = createLocalVue();
localVue.use(Vuex);
describe('Test.vue',()=>{
let wrapper;
let getters;
let store;
let action;
let mutations;
let option;
beforeEach(()=>{
state = {
name: '张三'
}
getters = {
GET_NAME: ()=> '张三'
}
mutations = {
SET_NAME: jest.fn()
}
action = {
setName: jest.fn()
}
store = new Vuex.Store({
getters,
mutations,
action
})
option = {
store,
localVue
}
wrapper = mount(Test, option)
}) it("测试vuex", ()=>{
expect(getters.GET_Name()).toEqual('张三');
wrapper.vm.$store.state.name= "李四";
expect(wrapper.vm.name).toMatch('李四');
wrapper.find('.btn').trigger('click')
expect(actions.setName).toHaveBeenCalled()
wrapper.find({ref: 'testComp'}).vm.$emit('on-select');
expect(mutations.SET_NAME).toBeCalled()
}) })
- wrapper
一个 Wrapper 是一个包括了一个挂载组件或 vnode，以及测试该组件或 vnode 的方法
属性
setMethods： 设置 Wrapper vm 的方法并强制更新。 通过setMethods方法用mock函数代替真实的方法，然后就可以断言点击按钮后对应的方法有没有被触发、触发几次、传入的参数等等
6.测试钩子
- beforeEach（fn） 在每一个测试之前需要做的事情，比如测试之前将某个数据恢复到初始状态
- afterEach（fn) 在每一个测试用例执行结束之后运行
- beforeAll(fn) 在所有的测试之前需要做什么
- afterAll(fn) 在测试用例执行结束之后运行
他们的调用顺序为： beforeAll => beforeEach => afterAll => afterEach
7.模拟接口请求
//Test.vue
mounted() {
this.getDataList();
}, methods: {
getDataList() {
this.$api.data.getData().then((res) => {
this.List= res.data;
});
} import {shallowMount, createLocalVue} from '@vue/test-utils';
const localVue = createLocalVue();
//axios请求
jest.mock('../data.js', ()=>({
getData: () => Promise.resolve({data:{name:'张三'}})
}))
describe('Test.vue',()=>{
const option;
let wrapper =shallowMount(Test, option)
it("异步接口被正常执行", async()=>{
const getDataList= jest.fn();
option.methods = {getDataList};
shallowMount(Test, option);
await expect(getDataList).toBeCalled();
}) it('测试异步接口的返回值', () => {
return localVue.nextTick().then(() => {
expect(wrapper.vm.List).toEqual( {name:'张三'});
})
}) })
7.常见的报错
[vue-test-utils]: find did not return .btn, cannot call trigger() on empty Wrapper
//出现该问题的时候，除了要确保你的组件确实存在该类名的情况，还要确保存在v-if的时候是否为true,如果为false，只需要在单测里将其设置为true，该问题便可解决
"ReferenceError: sessionStorage is not defined"
//出现该问题只需要去模拟本地存储就可以了，npm提供了一个模拟本地存储数据的依赖包mock-local-storage，安装后在单测文件里导入即可
//import 'mock-local-storage';
//包地址：https://www.npmjs.com/package/mock-local-storage
TypeError: Cannot read property xxxx of undefined
//这个问题的一般解决方法是直接mock数据
wrapper = mount(Test, {
mocks:{
$router:[], //不然可能会报 Cannot read property 'push' of undefined，
$cacheKeys: { TOKEN: 1 }, // Cannot read property 'TOKEN' of undefined
}
})
注：要明白测试的目的，测试关心是我们的代码有没有达到我们预期的效果，它并不关心实现的过程，所以不需要太过于纠结变量的取值或者其他的问题
8、覆盖率报告
单元测试有四个指标：
%stmts是语句覆盖率（statement coverage）：是否每个语句都执行了？
%Branch分支覆盖率（branch coverage）：是否每个if代码块都执行了？
%Funcs函数覆盖率（function coverage）：是否每个函数都调用了？
%Lines行覆盖率（line coverage）：是否每一行都执行了？
jest提供了生成测试覆盖率报告的命令
- npx jest --init 生成配置文件jest.config.js
- package.json添加上
--coverage这个参数
//修改package.json
"scripts": {
"test": "jest --coverage"
}
npm run test之后会生成coverage文件
然后再网页打开index.html，就会看到下图
三种颜色分别代表不同比例的覆盖率（<50%红色，50%~80%灰色， ≥80%绿色）
点击文件名可以查看代码的执行情况，
旁边显示的1x代表执行的次数
vue-jest-utils官网：https://vue-test-utils.vuejs.org/zh/guides/
单元测试的相关参考链接：https://alexjover.com/blog/
vue+jest+vue-test-utils 单元测试的更多相关文章
- 前端单元测试，以及给现有的vue项目添加jest + Vue Test Utils的配置
文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...
- 如何为我的VUE项目编写高效的单元测试--Jest
Unit Testing(单元测试)--Jest 一个完整的测试程序通常由几种不同的测试组合而成,比如end to end(E2E)测试,有时还包括整体测试.简要测试和单元测试.这里要介绍的是Vue中 ...
- vue项目工具文件utils.js javascript常用工具类，javascript常用工具类，util.js
vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...
- Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- vue --- 解读vue的中webpack.base.config.js
const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils ...
- vue — 创建vue项目
创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
随机推荐
- [转]分布式监控工具Ganglia 介绍 与 集群部署.
如果你目的很明确就是冲着标题来的,不爱看我唠叨,请直接进入第二个分割线之后的内容. 其实之前就是有做Swift监控平台的打算的,但是因为没什么硬性需求么,也不要紧的,就一直搁置了.最近实验室来了个大二 ...
- [转]Android自定义控件：进度条的四种实现方式（Progress Wheel的解析）
最近一直在学习自定义控件,搜了许多大牛们Blog里分享的小教程,也上GitHub找了一些类似的控件进行学习.发现读起来都不太好懂,就想写这么一篇东西作为学习笔记吧. 一.控件介绍: 进度条在App中非 ...
- Intellij IDEA 如何使用Jrebel热部署
My Jrebel 已经不再提供免费使用了,或使用破解版Jrebel 或可以移步至 HotSwapAgent,或使用破解的Jrebel. 一个java web项目,在写的过程中我们需要不断调试,如果没 ...
- H3C配置历史命令缓冲大小--接口视图（console为准）
[wang]user-interface console 0 [wang-ui-console0]history-command max-size 30 //配置缓冲区大小 [wang-ui-c ...
- Struts 2三种方式实现Ajax
Ajax本质上和普通的HTTP请求是一样的,只不过普通的HTTP请求是给人看的,而Ajax请求是给JS代码去用的. 所以Ajax请求的页面一般比普通的HTTP请求的响应内容还要简单,可能是一个页面的一 ...
- js 的this指向问题
this指向的,永远只可能是对象! this指向谁,永远不取决于this写在哪!而是取决于函数在哪调用. this指向的对象,我们称之为函数的上下文context,也叫函数的调用者. 1:通过函数名直 ...
- 【k8s】kubeadm快速部署Kubernetes
1.Kubernetes 架构图 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Mast ...
- UTF-8、UTF-16、UTF-32编码的相互转换（不使用现成的函数）
最近在考虑写一个可以跨平台的通用字符串类,首先需要搞定的就是编码转换问题. vs默认保存代码文件,使用的是本地code(中文即GBK,日文即Shift-JIS),也可以使用带BOM的UTF-8.gcc ...
- 第三阶段：3.Web端产品设计：1.以用户为中心的产品设计2
从功能到体验.提供不同的附加值.
- 2019 秦皇岛CCPC赛后总结
以前一直想参加ICPC或CCPC的,所以即使得知比赛会打星号,我还是想去. 感觉自己对什么都没有兴趣了,比较渴望找点快乐.. 这场比赛非常强,吉老师和杜老师都来啦,还有岛娘! 有幸要到了签名 滚榜的时 ...