vue單元測試（jest）

一、環境配置

1、安裝依賴

vue add @vue/cli-plugin-unit-jest

確保已經安裝了vue-cli3或vue-cli4，可以通過vue --version測試

安裝完成，時間略微長一點，5-10分鍾

安裝完成后package.json里會增加這些依賴

 文件根目錄多出一個jest.config.js文件以及tests/unit/example.spec.js

 依賴安裝完成后需要npm install

2、修改測試案例

修改tests文件夾下的unit文件夾下的example.spec.js中的代碼

import { mount } from '@vue/test-utils'
import HelloWorld from '@/testComponents/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  const wrapper = mount(HelloWorld);
  const vm = wrapper.vm;
  it('渲染', () => {
    expect(wrapper.html()).toContain('<span>0</span>')
  })
  it('計數器在點擊按鈕時自增', () => {
    // 點擊之前
    console.log('計數器點擊之前的值：' + vm.count);
    // 調用實例中的increment方法，點擊計數器
    vm.increment();
    // 點擊之后
    console.log('計數器點擊之后的值：' + vm.count);
    // 判斷最后的count是否為最后對應的值
    expect(vm.count).toBe(1);
  })
})

修改HelloWorld.vue中的代碼

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">自增</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

3、運行

npm run test:unit

運行結果

 單獨運行一個測試用例：

npm run test:unit <name>

例如：npm run test:unit example