本文以Jest测试框架为例子，介绍罕用的api和用法
装置
第一种：创立我的项目的时候勾选 Unit Testing，后续抉择 Jest第二种：在我的项目根目录执行 vue add @vue/cli-plugin-unit-jest罕用api
describe：创立测试分组test(别名：it)：创立测试用例expect：提供各种办法断定测试后果是否合乎预期匹配函数
toBe: 值类型判断相等toEqual: 援用类型判断相等toBeNulltoBeUndefinedtoBedefinedtoBeNaNtoBeTruthytoBeFalsytoContain: 数组是否蕴含toHaveLenth: 数组长度toThrow: 异样匹配生命周期
beforeAll：所有测试用例执行前触发（只触发一次）beforeEach：每个测试用例执行前触发afterAll：所有测试用例执行后触发（只触发一次）afterEach：每个测试用例执行后触发组件
mount：挂载组件，包含子组件shallowMount：只挂载以后组件，不包含子组件Wrapper：挂载后返回vnode和测试相干的办法vm：返回vue实例classes：返回相干类名的dom或者汇合find：返回满足一个条件的domfindAll：返回满足所有条件的domhtml：返回html字符串text：返回内容字符串setData：设置组件datasetProps：设置组件propstrigger：触发事件用法
// utils.jsexport 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.jsimport { 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)})