Vue的自動化測試

前言

爲何咱們須要測試？

讓產品能夠快速迭代，同時還能保持高質量 -- 阮一峯 持續集成是什麼？

對於一些相對穩定的系統級別頁面，自動化測試在提升測試的效率的方面起到很是重要的做用。前端的自動化測試主要包括：瀏覽器測試和單元測試。Vue官方腳手架自帶自動化測試配置，並幫助你完成對組件，函數等的自動化測試。

什麼是持續集成？它和持續部署有什麼區別？

代碼集成到主分支須要通過一系列的自動化測試，當測試都經過以後，方可執行自動化部署，不然不能完成集成。這說明了自動化測試的重要性，咱們不能等測試工程師去發現問題。

在Vue腳手架當中，Karma和NightWatch分別對應着單元測試和e2e測試。單元測試更可能是面向JS功能邏輯的檢驗，而NightWatch更可能是面對業務邏輯的檢驗。

單元測試

代碼的單元測試主要針對某些核心功能的某些函數進行測試。vue官方推薦是使用karma，mocha和chai等。karma並非一個測試框架，也不是一個斷言庫。它能夠運行HTTP Server，運行HTML文件在你喜歡的測試框架上。不單單只是運行測試，還能夠計算測試的覆蓋率。mocha是測試框架，專門實現各個單元劃分測試。chai是典型的斷言庫。

轉發自：https://www.jianshu.com/p/f2e7ad06e84e

 

vue單元測試

npm run unit # 運行單元測試 

Karma

Karma是一個專門的測試運行器（runner），它不是一個測試框架框架，也不是以一個斷言庫。Karma兼容Jasmine，Mocha和QUnit，能夠集成mocha，webpack等功能，成爲以Karma爲平臺的單元測試，官方選擇的事mocha的測試框架和chai的斷言庫。它擁有一些測試插件：

• karma-webpack 用webpack預處理文件
• karma-coverage 測試覆蓋率
• karma-mocha 接入mocha測試框架
• karma-spec-reporter 輸出報告
• karma-phantomjs-launcher 控制PhantomJS
• karma-phantomjs-shim 給PhantomJS兼容的控制

karma-coverage是基於istanbul。這些插件集成在karma這個runner，把webpack打包的vue項目，測試裏組件實現的功能，包括組件庫，業務邏輯和請求範圍。它的配置文件karma.conf.js裏面默認配置了不少插件的內容，基本上不須要調整。

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'], // 文件入口，過濾掉index.html preprocessors: { './index.js': ['webpack', 'sourcemap'] // 預處理器 }, webpack: webpackConfig, // 專門測試webpack配置 webpackMiddleware: { noInfo: true, }, coverageReporter: { dir: './coverage', // 覆蓋率配置 reporters: [ { type: 'lcov', subdir: '.' }, { type: 'text-summary' }, ] }, }); }; 

Mocha

mocha自己只是一個單元測試框架，能夠兼容第三方斷言庫，包括：

• should.js
• expect.js
• chai
• better-assert
• unexpected

在Vue開發框架中位於specs（specifications）文件底下，能夠針對某個組件或者某個js進行測試。

import Vue from 'vue'; import Hello from '@/components/Hello'; describe('Hello.vue', () => { it('should render correct contents', () => { const Constructor = Vue.extend(Hello); const vm = new Constructor().$mount(); expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App'); }); }); 

其中，describe和it是mocha的語法結構，describe是這對某個組件或者函數的名字描述，測試腳本里面應該包括一個或多個describe塊，每一個describe塊應該包括一個或多個it塊。it是對它須要完成某些功能的描述，它裏面是具體的測試用例。在測試框架中，describe,it, expect和sinon都是全局方法。

Chai

Chai也就是一個很是簡單的斷言庫，所謂的斷言，就是預期某些執行結果符合你本身的要求。全部的測試用例都應該含有一句或多句的斷言。

expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App'); 

上面這句話的含義，就是在實例化了Hello這個組件以後，針對它某個dom上綁定的文字進行斷言，保證了數據綁定後的文字顯示。同理，也可使用在某些js實現某個功能，對它進行自動化測試。

vue-test-utils

vuejs/vue-test-utils是官方的輔助測試庫。它其實便是將組件實例化的過程進行封裝，幫你模擬它組件實例化過程。shallow這個函數把組件List實例化，並傳入props等參數，這樣，你能夠斷言數據綁定的結果。

const items = ['', ''] const wrapper = shallow(List, { propsData: { items } }) expect(wrapper.findAll('li').length).to.equal(items.length) 

vue-router和vuex的單元測試問題

項目每每都是使用vuex和vue-router進行異步獲取數據，須要外部依賴。這時，咱們須要inject-loader來實現對vue組件對象內部的數據模擬。假設咱們有這麼一個組件，它引用了一個服務，能夠是同步或異步（promise），這個對象會被總體替換。

<!-- example.vue -->
<template> <div class="msg">{{ msg }}</div> </template> <script> // this dependency needs to be mocked import SomeService from '../service' export default { data () { return { msg: SomeService.msg } } } </script> 

首先你要安裝inject-loader，經過行內寫法注入該組件。

npm install inject-loader@^2.0.0 --save-dev

const ExampleInjector = require('!!vue-loader?inject!./example.vue')

在對應的spec.js中添加了須要注入的對象。../service是在組件中的依賴對象，它的結果會被替換。

const ExampleWithMocks = ExampleInjector({ // mock it '../service': { msg: 'Hello from a mocked service!' } }) 

端對端測試

單元測試更可能是對某個組件或者js進行功能測試。端對端測試（e2e）用於模擬整個業務流程的進行自動化測試（填報，增刪查改等）。vue官方推薦是使用nightwatch，它一樣只是個runner，默認配置chromedriver，phantomjs。

NightWatch

NightWatch是一個專門的端對端測試運行器（runner），它的配置文件nightwatch.conf.js會設置對應的命令參數，拼接到nightwatch的命令行操做，詳情參考官網。

它依賴於瀏覽器控制器selenium，而selenium是一個.jar後綴的文件，須要java的運行環境。因此你須要安裝java並配置好環境變量。然而，selenium須要對應的driver配合來操控瀏覽器。

執行測試

default e2e test相似單元測試中的describe和it的測試描述，browser則是傳入的瀏覽器對象，這個對象能夠是chrome，也能夠是firefox，由selenium控制。url說明的是跳到目標路徑，waitForElementVisible說明的是等待5000ms直到id爲app的dom出現，而後，assert幫助你進行斷言某個dom的內容。

module.exports = { 'default e2e tests': function test(browser) { const devServer = browser.globals.devServerURL; browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.elementPresent('.hello') .assert.containsText('h1', 'Welcome to Your Vue.js App') .assert.elementCount('img', 1) .end(); }, }; 

綜上所述，e2e測試的寫法很簡單，它相較於單元測試得功能檢驗，更可能是瀏覽器外的控制，針對某些業務流程進行瀏覽器的操做驗證。之前測試工程師要花十分鐘完成的「測試流程」，咱們能夠快速得模擬出來。