使用 Jest 進行 Vue 單元測試

本文介紹：
一、vue-cli3下jest環境的搭建
二、vue組件基本的測試方法

環境配置

vue-cli3 的插件使安裝流程變得格外簡單，經過 vue ui 啓動可視化管理系統，在插件欄，點擊 ‘添加插件’，搜索 @vue/cli-plugin-unit-jest，點擊安裝就能夠了，對應命令行的 vue add @vue/cli-plugin-unit-jest 命令；這個過程其實是包含了安裝和調用兩個步驟，而且會把相關的依賴一併安裝進來，這樣就不須要本身一個一個的安裝每一個依賴了。

安裝完成後，會發現package.json 文件裏多了這些依賴

在根目錄會發現新生成了一個 test 文件夾，裏面有一個 .spec.js 後綴的示例文件，用 packgae.json 裏的 test:unit 指令直接運行，就能夠調用 jest 的測試了，系統會匹配全部 .spec.js 或者 .test.js 後綴的文件並執行期中的代碼，正常的結果以下。

環境配置到這裏基本就結束了。

vue 單文件測試案例

下面我經過一個簡單的 vue組件 來介紹最基礎的測試用例編寫，以element-ui 的 alert 組件爲例，對於一個vue 組件，核心的測試指標因該是 props 接口，alert.vue 文件內定義了下面幾個 prop：

個人測試代碼以下，講解部分都寫到了註釋裏：

import { mount } from '@vue/test-utils' // 建立一個包含被掛載和渲染的 Vue 組件的 Wrapper

import { mount } from '@vue/test-utils' // 建立一個包含被掛載和渲染的 Vue 組件的 Wrapper

import Alert from '@/components/alert/index.vue'; // 引入組件

describe('Alert', () => { // describe 表明一個做用域
  
  it('create', () => {
    // ‘creat’ 這裏只是一個自定義的描述性文字
    const wrapper = mount(Alert, {
      // 經過 mount 生成了一個包裹器，包括了一個掛載組件或 vnode，以及測試該組件或 vnode 的方法
      propsData: {
        title: 'title',
        showIcon: true
      }
      // 能夠帶參數，這裏我經過 propsData 傳遞了接口數據
    })
    expect(wrapper.find('.el-alert__title').text()).toEqual('title');
    expect(wrapper.vm.visible).toBe(true);
    // .vm 能夠獲取當前實例對象，至關於拿到了 vue組件裏的 this 對象
    // find()能夠匹配各類類型的選擇器，相似於選中 DOM, text() 就是獲取其中的內容
    // toEqual 是一個斷言，判斷結果爲 ‘title’ 時，經過測試，不然猜想是失敗
  });

  it('type', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'title',
        showIcon: true,
        type: 'success'
      }
    })
    expect(wrapper.classes('el-alert--success')).toBe(true);
    // classes() 方法，返回 class 名稱的數組。或在提供 class 名的時候返回一個布爾值
    // toBe 和toEqual 相似，區別在於toBe 更嚴格限於同一個對象，若是是基本類型則沒什麼區別
  });

  it('description', () => {
    const wrapper =  mount(Alert, {
      propsData: {
        title: 'Dorne',
        description: 'Unbowed, Unbent, Unbroken',
        showIcon: true
      }
    })
    expect(wrapper.find('.el-alert__description').text()).toEqual('Unbowed, Unbent, Unbroken');
  });

  it('title slot', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'Dorne'
      },
      slots: {
        title: '<span>foo</span>'
      }
    })
    // 這裏經過slots 屬性，添加了一個 slot 插槽，而後來判斷插槽內容是否正確渲染進去了
    expect(wrapper.find('.el-alert__title').text()).toEqual('foo')
  });

  it('close', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'test'
      }
    })
    wrapper.find('.el-alert__closebtn').trigger('click')
    expect(wrapper.vm.visible).toBe(true)
    // trigger()能夠觸發一個事件，這裏模擬了點擊
  });
});複製代碼

上面的 測試用例，覆蓋了 alert 組件的 prop 和 click 事件，這些是 vue 單文件測試中的最經常使用的部分，執行下 npm run test:unit 看下效果

表格裏的是關於代碼覆蓋率的指標，默認是關閉的，須要在jest.config.js 中配置下，

"collectCoverage": true,
  "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]複製代碼

Test Suites 爲一組集合，一般一個測試文件對應一個 Test Suites， Tests 爲全部測試實例的個數，咱們這裏全部的測試實例都經過了測試，因此顯示 passed，若是有某個 test 測試失敗，會有 fail 輸出：

Okay，以上就是 jest 在 vue 項目中的簡單應用，但願對你有幫助。

Jest 進階部分

相關文檔：

Vue Test Utils

jest 官網

vue-cli3 插件部分

推薦文章：

Vue 應用單元測試的策略與實踐