vue 組件測試

Vue Test Utils 是 Vue.js 官方的單元測試實用工具庫。它在瀏覽器和 Node.js 環(huán)境中皆可運行，并能配合任何 test runner 使用。

選擇一個測試運行器

測試運行器 (test runner) 就是運行測試的程序。

主流的 JavaScript 測試運行器有很多，但 Vue Test Utils 都能夠支持。它是與測試運行器無關(guān)的。

當然在我們選用測試運行器的時候也需要考慮一些事項：功能集合、性能和對單文件組件預(yù)編譯的支持等。在仔細比對現(xiàn)有的庫之后，我們推薦其中的兩個測試運行器：

Jest 是功能最全的測試運行器。它所需的配置是最少的，默認安裝了 JSDOM，內(nèi)置斷言且命令行的用戶體驗非常好。不過你需要一個能夠?qū)挝募M件導(dǎo)入到測試中的預(yù)處理器。我們已經(jīng)創(chuàng)建了 vue-jest 預(yù)處理器來處理最常見的單文件組件特性，但仍不是 vue-loader 100% 的功能。

mocha-webpack 是一個 webpack + Mocha 的包裹器，同時包含了更順暢的接口和偵聽模式。這些設(shè)置的好處在于我們能夠通過 webpack + vue-loader 得到完整的單文件組件支持，但這本身是需要很多配置的。

瀏覽器環(huán)境

Vue Test Utils 依賴瀏覽器環(huán)境。技術(shù)上講你可以將其運行在一個真實的瀏覽器，但是我們并不推薦，因為在不同的平臺上都啟動真實的瀏覽器是很復(fù)雜的。我們推薦取而代之的是用 JSDOM 在 Node 虛擬瀏覽器環(huán)境運行測試。

Jest 測試運行器自動設(shè)置了 JSDOM。對于其它測試運行器來說，你可以在你的測試入口處使用 jsdom-global 手動設(shè)置 JSDOM。

測試單文件組件

Vue 的單文件組件在它們運行于 Node 或瀏覽器之前是需要預(yù)編譯的。我們推薦兩種方式完成編譯：通過一個 Jest 預(yù)編譯器，或直接使用 webpack。

vue-jest 預(yù)處理器支持基本的單文件組件功能，但是目前還不能處理樣式塊和自定義塊，這些都只在 vue-loader 中支持。如果你依賴這些功能或其它 webpack 特有的配置項，那么你需要基于 webpack + vue-loader 進行設(shè)置。

測試規(guī)范示例

import { mount } from '@vue/test-utils'import Component from './component'
describe('Component', () => {  test('is a Vue instance', () => {    const wrapper = mount(Component)    expect(wrapper.isVueInstance()).toBeTruthy()  })})

當你用 Vue Test Utils 掛載一個組件時，你可以訪問到 HTML 根元素。這可以保存為一個快照為 Jest 快照測試所用。

test('renders correctly', () => {  const wrapper = mount(Component)  expect(wrapper.element).toMatchSnapshot()})