## 一、概述 jest 是facebook推出的一款測試框架，它自動集成了斷言、JSDom、覆蓋率報告等開發者所需要的所有測試工具，是一款幾乎零配置的測試框架。它對同樣是 Facebook 的開源前端框架 React 的測試十分友好。 > vue-cli3版本已經自帶了jest的單元測試環境； ## 二、jest與Vue-test-utils Vue-test-utils是Vue的官方的單元測試框架，它提供了一系列非常方便的工具，使我們更加輕松的為Vue構建的應用來編寫單元測試。主流的 JavaScript 測試運行器有很多，但 Vue Test Utils 都能夠支持。它是測試運行器無關的。 Vue-test-utils在Vue和Jest之前提供了一個橋梁，暴露出一些接口，讓我們更加方便的通過Jest為Vue應用編寫單元測試。 ## 三、安裝配置 ``` npm install --save-dev jest @vue/test-utils ``` 然后在`package.json`中定義一個單元測試的腳本。 ```js // 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' }, } ``` 配置好了之后，就可以開始編寫單元測試了。 ## 四、實例 通過vue-test-utils提供的`mount`方法來掛載組件，創建包裹器和Vue實例； ``` import { mount } from '@vue/test-utils' import Component from './component' describe('Component', () => { test('是一個 Vue 實例', () => { const wrapper = mount(Component) expect(wrapper.isVueInstance()).toBeTruthy() }) }) ``` 啟用單元測試的命令： ``` npm run unit ```