本文介紹：

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: 'foo'

}

})

// 這里通過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 進階部分

相關文檔：

推薦文章：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的jset编写测试vue代码_使用 Jest 进行 Vue 单元测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。