Vue项目单元测试入门

本文以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)
})