Vue组件单元测试

组件单元测试的好处：

• 提供描述组件行为的文档
• 节省手动测试的时间
• 减少研发新特性时产生的bug
• 改进设计
• 促进重构

Vue中可以使用vue-jest来进行组件单元测试

Jest常用API

全局函数

• describe(name, fn)  可以将相关测试组合一起，测试描述块
• test(name, fn)          测试方法
• expect(value)           断言

匹配器

• toBe(value)           判断值是否相等
• toEqual(obj)          判断对象是否相等
• toContain(value)   判断数组或字符串是否包含

快照

• toMatchSnapshot()

Vue Test Utils常用API

mount

• 创建一个包含被挂载和渲染的Vue组件的Wrapper

Wrapper

• vm            wrapper包裹的组件实例
• props()     返回Vue实例选项的props对象
• html()       组件生成的HTML标签
• find()        通过选择器返回匹配到组件的DOM元素
• trigger()   触发DOM原生事件，自定义事件用wrapper.vm.$emit()

简单实现

安装依赖

cnpm i jest @vue/test-utils vue-jest babel-jest -D

配置测试脚本

// package.json
"script": {
  "test": "jest"
}

创建Jest配置文件

// jest.config.js
module.exports = {
  "testMatch": ["**/__test__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [ "js", "json", "vue" ],
  "transform": { ".*\\.(vue)$": "vue-jest", ".*\\.(js)$": "babel-jest"}
}

Babel配置文件

// babel.config.js
moudle.exports= {
  presets: [
    ['@babel/preset-env']
  ]
}

Babel桥接

cnpm i babel-core@bridge -D

创建单元测试

import input from './input.vue'
import { mount } from '@vue/test-utils'
describe('logo-input', () => {
  test('input-text', () => {
    const wrapper = mount(input) // 创建组件
    // 获取组件的html判断是否有包含 input type="text" 文本
    expect(wrapper.html()).toContain('input type="text"')
  })
  test('input-password', () => {
    // 可以传入参数
    const wrapper = mount(input, {
      propsData: {
        type: 'password'
      }
    })
    expect(wrapper.html()).toContain('input type="password"')
  })
  // 创建快照 快照可以用来对比前后测试的结果是否一样
  test('input-snapshot', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password',
        value: 'admin'
      }
    })
    expect(wrapper.vm.$el).toMatchSnapshot()
  })
})