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行爲驅動開發，先開發代碼，在測試最後結果
集成測試，只測試大的組件，而不測試子組件，覆蓋率低，功能能實現
https://cn.vuejs.org/v2/guide/unit-testing.html