关于前端: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)
})