本文以 Jest 测试框架为例子,介绍罕用的 api 和用法
装置
第一种:创立我的项目的时候勾选 Unit Testing,后续抉择 Jest
第二种:在我的项目根目录执行 vue add @vue/cli-plugin-unit-jest
罕用 api
describe:创立测试分组
test(别名:it):创立测试用例
expect:提供各种办法断定测试后果是否合乎预期
匹配函数
toBe: 值类型判断相等
toEqual: 援用类型判断相等
toBeNull
toBeUndefined
toBedefined
toBeNaN
toBeTruthy
toBeFalsy
toContain: 数组是否蕴含
toHaveLenth: 数组长度
toThrow: 异样匹配
生命周期
beforeAll:所有测试用例执行前触发(只触发一次)beforeEach:每个测试用例执行前触发
afterAll:所有测试用例执行后触发(只触发一次)afterEach:每个测试用例执行后触发
组件
mount:挂载组件,包含子组件
shallowMount:只挂载以后组件,不包含子组件
Wrapper:挂载后返回 vnode 和测试相干的办法
vm:返回 vue 实例
classes:返回相干类名的 dom 或者汇合
find:返回满足一个条件的 dom
findAll:返回满足所有条件的 dom
html:返回 html 字符串
text:返回内容字符串
setData:设置组件 data
setProps:设置组件 props
trigger:触发事件
用法
// utils.js
export function add(a, b) {return a + b}
export class Count {constructor() {this.number = 1}
increase() {this.number++}
decreate() {this.number--}
}
export function timeout(fn) {setTimeout(function() {fn()
}, 2000)
}
export function promise() {return new Promise((resolve, reject) => {setTimeout(() => {resolve(2)
}, 2000)
})
}
惯例测试
const {add} = require('./utils')
test('add 1 + 2 to equal 3', () => {expect(add(1, 2)).toBe(3)
})
分组测试
const {Count} = require('./utils')
describe('分组测试', () => {
let obj = null
beforeAll(() => {console.log('所有 test 执行前触发')
})
beforeEach(() => {
// 利用生命周期,防止类对象状态相互影响
console.log('每个 test 执行前触发')
obj = new Count()})
afterAll(() => {console.log('所有 test 执行完触发')
})
afterEach(() => {console.log('每个 test 执行完触发')
})
test('测试 increase', () => {expect(obj.increase()).toBe(2)
})
test('测试 decrease', () => {expect(obj.decrease()).toBe(0)
})
})
异步代码测试
调用 done 函数
const {timeout} = require('./utils')
test('异步代码测试', done => {timeout(() => {expect(2 + 2).toBe(4)
done()})
})
跳过期待的工夫
const {timeout} = require('./utils')
test('异步代码测试', done => {jest.useFakeTimers()
const fn = jest.fn()
timeout(fn)
jest.advanceTimersByTime(2000)
expect(fn).toHaveBeenCalledTimes(1)
})
promise 函数解决
办法一
const {promise} = require('./utils')
test('promise', () => {return promise().then(res => {expect(res).toBe(2)
})
})
办法二
const {promise} = require('./utils')
test('promise', () => {return expect(promise()).resolves.toBe(2)
})
组件测试
// @/components/Modal.vue
<template>
<div v-show="visible" class="modal-box">
<div class="modal-title">{{title}}</div>
<div class="modal-content"></div>
</div>
</template>
<script>
expect default {
name: 'Modal',
props: {
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
}
}
}
</script>
// @/tests/unit/Modal.spec.js
import {shallowMount} from '@vue/test-utils'
import Modal from '@/components/Modal'
it('test Modal props.title', () => {
const title = '题目'
const wrapper = shallowMount(Modal, {propsData: { title}
})
expect(wrapper.find('.modal-title').text()).toBe(title)
})