介紹

Vue-test-utils是Vue的官方的單元測試框架，它提供了一系列非常方便的工具，使我們更加輕松的為Vue構建的應用來編寫單元測試。主流的 JavaScript 測試運行器有很多，但 Vue Test Utils 都能夠支持。它是測試運行器無關的。

Jest，是由Facebook開發的單元測試框架，也是Vue推薦的測試運行器之一。Vue對它的評價是：

Jest 是功能最全的測試運行器。它所需的配置是最少的，默認安裝了 JSDOM，內置斷言且命令行的用戶體驗非常好。不過你需要一個能夠將單文件組件導入到測試中的預處理器。我們已經創建了 vue-jest 預處理器來處理最常見的單文件組件特性，但仍不是 vue-loader 100% 的功能。

我認為可以這樣理解，Vue-test-utils在Vue和Jest之前提供了一個橋梁，暴露出一些接口，讓我們更加方便的通過Jest為Vue應用編寫單元測試。

安裝

通過Vue-cli創造模板腳手架時，可以選擇是否啟用單元測試，并且選擇單元測試框架，這樣Vue就幫助我們自動配置好了Jest。

如果是后期添加單元測試的話，首先要安裝Jest和Vue Test Utils：

npm install --save-dev jest @vue/test-utils

然后在package.json中定義一個單元測試的腳本。

// package.json{ "scripts": {  "test": "jest" }}

為了告訴Jest如何處理*.vue文件，需要安裝和配置vue-jest預處理器：

npm install --save-dev vue-jest

接下來在jest.conf.js配置文件中進行配置：

module.exports = { moduleFileExtensions: ['js', 'json', 'vue'], moduleNameMapper: {  '^@/(.*)$': '<rootDir>/src/$1' }, transform: {  '^.+//.js$': '<rootDir>/node_modules/babel-jest',  '.*//.(vue)$': '<rootDir>/node_modules/vue-jest' },}

其他的具體的配置可以參考官方文檔。

配置好了之后，就可以開始編寫單元測試了。

import { mount } from '@vue/test-utils'import Component from './component'describe('Component', () => { test('是一個 Vue 實例', () => {  const wrapper = mount(Component)  expect(wrapper.isVueInstance()).toBeTruthy() })})

上面的例子中，就是通過vue-test-utils提供的mount方法來掛載組件，創建包裹器和Vue實例

如果不使用vue-test-utils也是可以掛載組件的：

import Vue from 'vue';import Test1 from '@/components/Test1';const Constructor = Vue.extend(HelloWorld);const vm = new Constructor().$mount();

啟用單元測試的命令：

npm run unit

可以在后面加上-- --watch啟動監聽模式

別名配置

使用別名在Vue中很常見，可以讓我們避免使用復雜、易錯的相對路徑：

import Page from '@/components/Test5/Test5'