使用 Jest 進行 Vue 單元測試
阿新 • • 發佈：2019-09-26
本文介紹：
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 應用單元測試的策略與實踐