vue中的单元测试

生成项目的时候一定要选择Jest选项，然后项目目录有tests文件夹

单元测试都写在unit这个文件夹里面，单元测试的具体内容

import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'

it ('测试HelloWorld', () => {
  let BaseVue = Vue.extend(HelloWorld) // 获取组件的构造函数
  let vm = new BaseVue({
    propsData: {
      msg: 'hello'
    }
  }).$mount()

  expect(vm.$el.innerHTML).toMatch('hello')
  vm.$destory()
})

vue 为了方法专门提供了测试的一些方法@vue/test-utils

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

这个测试的库里面有很多方法

TDD测试驱动开发，先写测试用例，再开发功能，测试覆盖率高
BDD行为驱动开发，先开发代码，在测试最后结果
集成测试，只测试大的组件，而不测试子组件，覆盖率低，功能能实现
​​​