使用 Jest 進行 Vue 單元測試

本文介紹：
1、vue-cli3下jest環境的搭建
2、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 應用單元測試的策略與實踐