在使用vue-cli創建項目的時候，會提示要不要安裝單元測試和e2e測試。既然官方推薦我們使用這兩個測試框架，那么我們就動手去學習實踐一下他們吧。

簡介

Karma

Karma是一個基于Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具在Vue中的主要作用是將項目運行在各種主流Web瀏覽器進行測試。

換句話說，它是一個測試工具，能讓你的代碼在瀏覽器環境下測試。需要它的原因在于，你的代碼可能是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來；另外，瀏覽器有兼容問題，karma提供了手段讓你的代碼自動在多個瀏覽器（chrome，firefox，ie等）環境下運行。如果你的代碼只會運行在node端，那么你不需要用karma。

Mocha

Mocha是一個測試框架，在vue-cli中配合chai斷言庫實現單元測試。

而Chai斷言庫可以看Chai.js斷言庫API中文文檔，很簡單，多查多用就能很快掌握。

我對測試框架的理解

npm run unit 執行過程

執行 npm run unit 命令 開啟Karma運行環境 使用Mocha去逐個測試用Chai斷言寫的測試用例 在終端顯示測試結果 如果測試成功，karma-coverage 會在 ./test/unit/coverage 文件夾中生成測試覆蓋率結果的網頁。

Karma

對于Karma，我只是了解了一下它的配置選項。

下面是Vue的karma配置，簡單注釋了下：

var webpackConfig = require('../../build/webpack.test.conf')module.exports = function (config) { config.set({  // 瀏覽器  browsers: ['PhantomJS'],  // 測試框架  frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],  // 測試報告  reporters: ['spec', 'coverage'],  // 測試入口文件  files: ['./index.js'],  // 預處理器 karma-webpack  preprocessors: {   './index.js': ['webpack', 'sourcemap']  },  // Webpack配置  webpack: webpackConfig,  // Webpack中間件  webpackMiddleware: {   noInfo: true  },  // 測試覆蓋率報告  // https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md  coverageReporter: {   dir: './coverage',   reporters: [    { type: 'lcov', subdir: '.' },    { type: 'text-summary' }   ]  } })}

Mocha和chai

我們看下官方的例子（都用注釋來解釋代碼意思了）：

import Vue from 'vue' // 導入Vue用于生成Vue實例import Hello from '@/components/Hello' // 導入組件// 測試腳本里面應該包括一個或多個describe塊，稱為測試套件（test suite）describe('Hello.vue', () => { // 每個describe塊應該包括一個或多個it塊，稱為測試用例（test case） it('should render correct contents', () => {  const Constructor = Vue.extend(Hello) // 獲得Hello組件實例  const vm = new Constructor().$mount() // 將組件掛在到DOM上  //斷言：DOM中class為hello的元素中的h1元素的文本內容為Welcome to Your Vue.js App  expect(vm.$el.querySelector('.hello h1').textContent)   .to.equal('Welcome to Your Vue.js App')  })})