前端單元測試是什么?

單元測試（unit testing），是指對軟件中的最小可測試單元進(jìn)行檢查和驗(yàn)證。對于單元測試中單元的含義，一般來說，要根據(jù)實(shí)際情況去判定其具體含義，如 C 語言中單元指一個(gè)函數(shù)，Java 里單元指一個(gè)類，圖形化的軟件中可以指一個(gè)窗口或一個(gè)菜單等?？偟膩碚f，單元就是人為規(guī)定的最小的被測功能模塊。單元測試是在軟件開發(fā)過程中要進(jìn)行的最低級(jí)別的測試活動(dòng)，軟件的獨(dú)立單元將在與程序的其他部分相隔離的情況下進(jìn)行測試。——百度百科

認(rèn)為前端代碼都運(yùn)行在瀏覽器里，如何做單元測試？！對于 Javascript 來講，當(dāng)然是可以進(jìn)行單元測試的，并且也通常是針對函數(shù)、模塊、對象進(jìn)行測試。前端單元測試狂階也有不少，比如 QUnit、Sinon、Mocha 等等，單元測試的執(zhí)行環(huán)境可以是我們?nèi)粘Ｊ褂玫臑g覽器 ie、Chrome 等，也可以是無界面瀏覽器比如 PhantomJS、Headless Chrome。
在前端的世界里，至少需要三類工具來進(jìn)行單元測試：

• 測試管理工具

測試管理工具是用來組織和運(yùn)行整個(gè)測試的工具，它能夠?qū)y試框架、斷言庫、測試瀏覽器、測試代碼和被測試代碼組織起來，并運(yùn)行被測試代碼進(jìn)行測試。我們經(jīng)常使用Karma

• 測試框架

測是框架是單元測試的核心，它提供了單元測試所需的各種 API，你可以使用它們來對你的代碼進(jìn)行單元測試。我們使用Mocha

• 斷言庫

斷言庫提供了用于描述你的具體測試的 API，有了它們你的測試代碼便能簡單直接，也更為語義化，理想狀態(tài)下你甚至可以讓非開發(fā)人員來撰寫單元測試。我們使用sinon-chai

可選工具包括：

• 測試瀏覽器

這個(gè)比較好理解，就是測試代碼所執(zhí)行的瀏覽器環(huán)境。我們使用 PhantomJS 或者Headless Chrome

• 測試覆蓋率統(tǒng)計(jì)工具

我們使用和 Karma 配套的Karma-coverage

Vue 工程的單元測試如何做?

下面著重講解 Vue 工程如何進(jìn)行自動(dòng)化的單元測試。本文講解的是使用 Vue-cli 或者 bfe-cli 創(chuàng)建的工程如何使用。測試工具默認(rèn)使用了上文的推薦工具。
首先在 /test/unit/specs/ 文件夾中增加一個(gè)測試案例文件，命名為 < 模塊名稱 >.spec.js。框架代碼會(huì)自動(dòng)掃描以.spec.js 結(jié)尾的文件當(dāng)做測試案例進(jìn)行執(zhí)行。
假設(shè)我們有一個(gè)這樣的組件MyComponent.vue:

<template>
  <span class="message">{{message}}</span>
  <span class="message2">{{message2}}</span>
</template>

<script>
  export default {props: ['message2'],
    data () {
      return {message: 'hello!'}
    },
    created () {this.message = 'bye!'}
  }
</script>

這個(gè)組件有輸入?yún)?shù) message2、有方法、有輸出，麻雀雖小五臟俱全，如何做單元測試呢？

// 導(dǎo)入工具方法
import {createTest, destroyVM} from '../util';
import MyComponent from 'path/to/MyComponent.vue'

describe('MyComponment', () => {
  let vm = null;
  // 每個(gè)案例執(zhí)行完成后銷毀組件實(shí)例
  afterEach(() => {destroyVM(vm);
  });
  // 第一個(gè)案例，檢查組件是否有 created 方法,has a created 是案例名稱
  it('has a created', () => {expect(typeof MyComponent.created).toBe('function');
  })
  // 檢查 data 設(shè)置是否正確
  it('sets the correct default data' () => {expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // 檢查渲染后的組件狀態(tài)
  it('renders the correct message', () => {vm = createTest(MyComponent);
    expect(vm.$el.querySelector('.message').textContent).to.equal('bye!')
  })
  // 檢查傳參是否正確
  it('renders correctly with different props', () => {
    vm = createTest(MyComponent, {message2: 'test1'});
    expect(vm.$el.querySelector('.message2').textContent).to.equal('test1')
  })
})

測試案例寫好了，接下來我們來執(zhí)行一下

$ npm run test

... 省略啟動(dòng)信息...

  MyComponment.vue
    ? has a created
    ? sets the correct default data
    ? renders the correct message
    ? renders correctly with different props

PhantomJS 2.1.1 (Linux 0.0.0): Executed 4 of 4 SUCCESS (0.193 secs / 0.058 secs)
TOTAL: 4 SUCCESS

從結(jié)果可以看出，一共 4 個(gè)案例，成功執(zhí)行 4 個(gè)，測試案例是使用 PhantomJS 無頭瀏覽器執(zhí)行的。同時(shí)，在 /test/unit/coverage/lcov-report/ 文件夾下可以找到測試報(bào)告，里面有詳細(xì)的代碼覆蓋率情況，可以明確的看出哪些代碼沒有被測試到。下圖為 bfe-ui 的測試報(bào)告。
[圖片上傳中...(image-504899-1542697571870-0)]

結(jié)合 Gitlab-CI 可以在工程每一次提交代碼時(shí)進(jìn)行一次單元測試，將所有案例自動(dòng)執(zhí)行一遍，并且給出測試報(bào)告，并將執(zhí)行結(jié)果可視化的反饋在流水線上。

以上就是關(guān)于 Vue 工程如何做單元測試的全部內(nèi)容。