【大白話】單元測試

時間 2019-11-21

標籤大白話單元測試简体版

原文原文鏈接

前言

對於大部分前端同窗們來講，可能平時都沒怎麼接觸過單元測試🙌，頂多在初始化 Vue 項目的時候看到過它問你要不要測試，或者據說過 karma、mocha 這些名詞，但具體就不得而知了。其實這東西並不複雜，只是咱們沒去學而已，它就像 Vue 同樣容易上手，多寫個幾天，就可以像寫 Vue 同樣如魚得水了🐠。javascript

爲何要單元測試

因此，咱們爲何須要單元測試呢🤔？
緣由很簡單：就是爲了減小 bug、提升產品穩定性，而不是爲了測試而測試。對咱們開發來講，它的好處也是顯而易見的：就是保證代碼質量。想一想咱們平時代碼出問題的時候，是否是經常不敢去刪除原有的代碼，而是像打補丁同樣往上加代碼，主要緣由就是沒有測試保障，你也不知道本身改了對不對、影響大不大💣。因此，若是有時間的話，單元測試仍是能夠寫寫的。css

什麼是單元測試

那麼，什麼是單元測試呢？簡單來講就是對（一些不常變更的）單元進行測試，對前端來講你能夠強行理解爲😁：就是對一些通用函數和通用組件進行測試。再直白點說就是寫一些測試代碼來驗證你的源代碼是否符合預期，僅此而已。
正經點說，測試又可分爲測試驅動開發（TDD）和行爲驅動開發（BDD）兩種，什麼意思呢🤔？html

TDD：經過測試來推進整個開發的進行（就是測着測着出了 bug 就返回修改代碼，注重測試結果）
BDD：經過行爲來推進整個開發的進行（就是按着按着出了 bug 就返回修改代碼，注重測試邏輯）

其實這些概念並不重要，咱們只要瞭解就行，畢竟這些概念也是近幾年纔出現，只是個稱呼。
那既然單元測試是個不錯的東西，爲何大部分人都不寫呢😅？說到這裏，不得不說下單元測試最大的一個缺點：就是在一開始須要花不少時間。可是在大部分狀況下，咱們不是在寫需求就是在寫需求的路上，沒時間搞它，因此就不懂。與之矛盾的是它的優勢：就是之後能夠花更少的時間😯，尤爲是若是你在開發新特性時，它能大大減小反作用。
ps: 單元測試的原則就是要儘可能獨立和單一，這樣纔有利於測試、維護和理解。固然即便用例所有經過了也要通過人工測試，由於咱們不能保證集成在一塊兒就不會有問題😬。前端

前置知識（關於測試工具）

這裏先拋給你們一幅測試工具的關係圖： vue

沒看懂也不要緊，下面會講解一波，但你要記住 karma 包含其餘三個！！！

karma

karma 不是一個測試框架，也不是一個斷言庫，而是一個測試集成工具，它的主要做用就是集成其餘各類測試工具（支持按需配置，你能夠經過 karma 的配置文件來集成你喜歡的框架、斷言庫和瀏覽器等），而後自動打開瀏覽器運行你的測試腳本，測試結果一般會顯示在命令行中。此外它還能夠監聽測試文件的變化，而後自執行。java

總結：你能夠粗淺的認爲 karma 就是用來打開瀏覽器的。

mocha

mocha 是一個很經常使用的測試框架（相似的有 jasmine 和 jest 等），它既能夠在 Node 中運行，也能夠在瀏覽器中運行。它的主要做用是提供一些方便的語法來編寫測試用例，以及對用例進行分組等。一個測試腳本能夠由多個 descibe 組成，每一個 describe 又能夠由多個 it 組成。descibe 主要就是用來分組，it 就是具體的測試用例代碼。這裏簡要看下它的語法，以下：node

describe('分組一', () => {
    it('測試用例描述一', () => {})
    it('測試用例描述二', () => {})
})
describe('分組二', () => {
    it('測試用例描述一', () => {})
    it('測試用例描述二', () => {})
})
複製代碼

這個就是固定寫法，記住就行，沒有什麼爲何👀。webpack

總結：你能夠粗淺的認爲 mocha 就是用來編寫測試用例的。

chai

由於 mocha 自己是不帶斷言的，因此須要和斷言庫結合使用。這裏咱們選擇 chai 這個斷言庫。它有三種不一樣風格的寫法，但意思是同樣的，就像下面這樣： git

這裏咱們採用的是中間 expect 的寫法，由於它比較符合天然語言（什麼是天然語言？就是讀起來比較順）。而後舉些例子🌰：

expect(1 + 1).to.be.equal(2); // 我期待 1 + 1 等於 2
expect('hello').to.be.a('string'); // 我期待 'hello' 是個字符串
expect('').to.be.empty; // 我期待 '' 是個空值
expect({ a: 1 }).to.have.property('a'); // 我期待 { a: 1 } 有一個屬性 a
複製代碼

要注意的是 chai 斷言庫中，to be been is has have 等這些詞是沒有意義的，只是爲了讀起來比較順而已，事實上讀起來也確實順，若是你懂點基礎英語的話。github

總結：chai 是一個語義化的斷言庫

sinon

sinon 是一個測試輔助工具，它的本質工做是測試替身，也就是用來替換測試中的部分代碼，使測試代碼變得簡潔。好比咱們要測一個函數是否被調用過，就能夠藉助 sinon.fake() 來實現，這是一個特殊的函數，如今不懂不要緊，用的時候你就知道了。

總結：sinon 是一個測試輔助工具

以上就是單元測試所需用到的大部分工具知識，若是你們想要加深瞭解的話，能夠自行百度。

開始實踐

雖然花了這麼大篇幅扯了這麼久🌚，但上面的背景知識對咱們的理解是頗有幫助的。不過，好記性不如寫代碼，下面就讓咱們趕忙擼起來吧💪。

初始化項目

先用 vue-cli 快速生成一個最簡版的 Vue 項目，這裏咱們選擇 default。

安裝各類依賴

要安裝的依賴有點多，我就不詳細說每一個東西是幹嗎的了，裝就是了。

yarn add karma karma-chai karma-chai-spies karma-chrome-launcher karma-mocha karma-sinon-chai mocha chai sinon sinon-chai karma-webpack vue-loader -D
複製代碼

新建 karma.conf.js 配置文件

執行 ./node_modules/karma/bin/karma init 命令，一路回車，就會在根目錄生成一個 karma.conf.js 配置文件。而後對這個文件作點修改，代碼以下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = function(config) {
    config.set({
        frameworks: ['mocha', 'sinon-chai', 'chai'], // 這是配置依賴包，karma 會自動引入這些包，後續咱們就不須要 import 了
        files: [
            'test/**/*.test.js', // 這是要執行的測試代碼
        ],
        preprocessors: { // 這是在測試以前要先用 webpack 處理一下
            "src/**/*.*": ["webpack"],
            "test/**/*.test.js": ["webpack"]
        },
        webpack: {
            mode: 'development',
            module: {
                rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: [{ loader: 'babel-loader'}]
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }]
            },
            plugins: [
                new VueLoaderPlugin()
            ]
        }
    })
})
複製代碼

順便在根目錄下新建一個空的 test 目錄。
再順便在 package.json 裏面加上一個腳本命令 "test": "karma start --single-run"。
最後的目錄結構大體以下：

對函數進行測試

ok，接下來讓咱們熱個身，寫個函數的測試用例。

寫一個簡單的函數

在 src 目錄下新建一個 utils.js 文件，其內容以下：

// utils.js
function add(a, b) {
    return a + b
}
function multiply(a, b) {
    return a * b
}
export {
    add,
    multiply
}
複製代碼

編寫函數的測試用例

通常來講測試文件名和源碼文件名是一致的，因此咱們在 test 目錄下新建一個 utils.test.js 文件。

import { add, multiply } from '../src/utils'

describe('工具函數測試', function() {
    it('求和函數測試', function() {
        let res = add(1, 1)
        expect(res).to.be.equal(2)
    })
    it('乘法函數測試', function() {
        let res = multiply(1, 1)
        expect(res).to.be.equal(1)
    })
})
複製代碼

嗯，就這樣，函數用例就編寫完了，固然你也能夠寫的再複雜點。

運行函數的測試用例

咱們直接運行 yarn test 就可以看到以下結果：

能夠看到咱們的兩個用例都經過了，也許你會問道我怎麼知道它有沒有運行呢，很簡單，你能夠把 equal 裏面的值故意改爲錯的運行一下，形如這樣： expect(res).to.be.equal(100)，你將會獲得以下結果：

能夠看到它會給你明顯的錯誤提示。固然你也能夠在 expect 後面打個 log 證實它執行了，以上就是函數的測試方法，是否是 easy 啊✌。
ps: 咱們執行 yarn test 就是執行 karma start --single-run，karma 會根據 karma.conf.js 的配置內容來執行 test 目錄下的代碼，並自動打開瀏覽器測試，結束後又自動關閉瀏覽器（--single-run 的做用），若是有報錯就會打印在控制檯中。

對組件進行測試

接下來咱們來看看 vue 組件是怎麼測試的吧。首先，固然須要一個組件啦。

寫一個簡單的組件

在 src 下面新建一個簡單的 demo.vue 組件，就像下面這樣：

<!-- demo.vue -->
<template>
    <div class="demo" :class="isError ? 'demo--error' : ''" @click="$emit('click')">
        <span class="text" :style="`opacity: ${opacity}`" :data-msg="msg">哈哈哈</span>
        <slot></slot>
    </div>
</template>
<script> export default { name: 'Demo', props: { msg: { type: String, default: '' }, isError: { type: Boolean, default: false }, opacity: { type: [String, Number], default: 1 } } } </script>
複製代碼

編寫組件的基礎測試用例

在 test 目錄下新建 demo.test.js 文件，內容以下：

import Vue from 'vue/dist/vue.common.js'
import Demo from '../src/demo.vue'

Vue.config.productionTip = false
Vue.config.devtools = false

describe('Demo 組件測試', () => {
    it('存在', () => { // 首先得確保有 demo 這個東西
        expect(Demo).to.exist // 不是 undefined、null、0、''等 fasly 值就是 exist
    })
    describe('Demo 組件的基礎功能測試', () => {
        it('.text 的文本內容測試', () => {
            const Constructor = Vue.extend(Demo)
            const vm = new Constructor().$mount() // 實例化組件
            console.log(vm.$el)
            expect(vm.$el.querySelector('.text').textContent).to.equal('哈哈哈') // 我期待 .text 元素的文本內容爲 '哈哈哈'
        })
    })
})
複製代碼

代碼應該還算通俗易懂，其實測試用例的思路大致是一致的，主要核心思想就是：先實例化組件，而後用選擇相應元素的一些可參照的東西進行斷言，看看是否和預期相匹配。
ok，讓咱們運行 yarn test 看下效果：

顯然這個用例也是 ok 的。那如何知道錯了呢，同以前的函數同樣，也故意把 equal('哈哈哈') 改錯就行，以後就再也不贅述了，就像下面這樣：

編寫組件的 props 測試用例

咱們直接上代碼，你們應該都能讀懂，寫法是同樣樣的😎：

// ...
describe('Demo 組件測試', () => {
    describe('Demo 組件的基礎功能測試', () => {})
    describe('Demo 組件的 props 測試', () => {
        it('.text 的屬性值爲黃小芮', () => { // 測試標籤屬性
            const Constructor = Vue.extend(Demo)
            const vm = new Constructor({
                propsData: { // 這是傳參的固定寫法，沒必要糾結
                    msg: '黃小芮'
                }
            }).$mount()
            expect(vm.$el.querySelector('.text').getAttribute('data-msg')).to.equal('黃小芮') // 我期待 .text 元素的 data-msg 屬性值爲 '黃小芮'
        })
        
        it('.demo 是否有 demo--error 的樣式名', () => { // 測試樣式名
            const Constructor = Vue.extend(Demo)
            const vm = new Constructor({
                propsData: {
                    isError: true
                }
            }).$mount()
            expect(vm.$el.classList.contains('demo--error')).to.equal(true) // 我期待 vm.$el 的樣式列表包含 demo--error 樣式名
        })
        
        it('.text 的 opacity 樣式', () => { // 測試 css 樣式（放到頁面中才會有樣式）
            const div = document.createElement('div')
            document.body.appendChild(div)
            const Constructor = Vue.extend(Demo)
            const vm = new Constructor({
                propsData: {
                    opacity: 0.5
                }
            }).$mount(div)
            const ele = vm.$el.querySelector('.text')
            expect(getComputedStyle(ele).opacity).to.equal('0.5') // 我期待 .text 元素的 css 樣式 opacity 值爲 '0.5'，注意這裏是字符串，css 的屬性值都是字符串
        })
    })
})
複製代碼

編寫組件的 slot 測試用例

這裏也直接上代碼，要注意的是 slot 和上面實例化組件的方法有點不太同樣：

// ...
describe('Demo 組件測試', () => {
    describe('Demo 組件的基礎功能測試', () => {})
    describe('Demo 組件的 props 測試', () => {})
    describe('Demo 組件的 slot 測試', () => {
        it('slot 測試', (done) => { // 異步函數須要加 done 參數說明一下，也是固定寫法
            Vue.component('xr-demo', Demo)
            let div = document.createElement('div')
            document.body.appendChild(div)
            // 這邊咱們的寫法和上面的不太同樣，不是經過 new 來實例化，而是直接寫 html
            div.innerHTML = ` <xr-demo> <p id="xr"></p> </xr-demo> `
            const vm = new Vue({
                el: div
            })
            setTimeout(() => { // 這是個異步的過程，通常用 $nextTick 和 setTimeout 處理
                let p = vm.$el.querySelector('#xr')
                expect(p).to.exist // 咱們期待在組件中能找到 id 爲 xr 的元素
                done() // 異步函數後面須要調用一下 done()，也是固定寫法
            })
        })
    })
})
複製代碼

編寫組件的 event 測試用例

這裏以 click 事件爲例子🌰，那麼如何測試點擊事件呢？咱們知道點擊事件無非就是要執行一個函數，只要函數被調用了就說明點擊事件發生了，那麼怎麼證實一個函數被執行了呢🤔？？？？嗯，是個大問題，因此，咱們須要用前面說過的 sinon.fake() 來打輔助，具體怎麼寫，仍是直接上代碼：

// ...
describe('Demo 組件測試', () => {
    describe('Demo 組件的基礎功能測試', () => {})
    describe('Demo 組件的 props 測試', () => {})
    describe('Demo 組件的 slot 測試', () => {})
    describe('Demo 組件的 event 測試', () => {
        it('Demo 上的 click 事件', () => {
            const Constructor = Vue.extend(Demo)
            const vm = new Constructor().$mount()
            const callback = sinon.fake(); // 這是 sinon 的特有函數
            vm.$on('click', callback) // 添加事件監聽
            vm.$el.click() // 點擊組件，會觸發上面👆那行的監聽，從而觸發 callback
            expect(callback).to.have.been.called // 咱們期待 callback 被調用過
        })
    })
})
複製代碼

這個東西也是固定的套路，多寫就會了，就像 Vue 同樣。

一些問題

有點重複

假如你寫了一遍上面的那些測試用例，你會發現代碼好像有點重複，有點重複就說明咱們能夠優化它，因而就要說到 mocha 的幾個鉤子函數（這裏只大概描述一下）：

describe('hooks', function() {
  before(function() {
    // runs before all tests in this block
  });
  after(function() {
    // runs after all tests in this block
  });
  beforeEach(function() {
    // runs before each test in this block
  });
  afterEach(function() {
    // runs after each test in this block
  });
  // test cases
  it('case one', () => {})
  it('case two', () => {})
});
複製代碼

也就是說咱們在執行 it 以前會先調用 beforeEach 這個鉤子，執行 it 以後調用 afterEach 這個鉤子。這樣一來咱們就能夠把實例化組件的代碼抽離出來寫在 beforeEach 裏面。

沒有及時銷燬

另外，你可能還注意到，咱們的實例沒有及時銷燬，因此咱們也能夠在 afterEach 這個鉤子裏面作相應的處理，就像下面這樣：

afterEach(function() {
    // 移除元素並釋放內存
    vm.$el.remove()
    vm.$destroy()
});
複製代碼

每次修改都要手動執行腳本

咱們可不能夠保存的時候就自動執行 yarn test 呢。嗯，是能夠的，小小修改一下最初的腳本命令就行，就像這樣："test": "karma start"，這下咱們保存的時候它就會自動測試一遍了。

別人家的單元測試

👌，接下來就是見證奇蹟的時刻😊。如今讓咱們打開 Element 的源碼來看看別人的單元測試是怎麼寫的（瞟一眼就行）：

有沒有發現，你忽然一下變的牛逼了，之前看不懂的東西，如今剛接觸就看懂了。嗯，是的，單元測試不過如此，要是再多寫個幾天就能夠信手拈來了（其實坑仍是有的😂，可是多寫就行了，都是套路）。另外，Vue 自己集成了整套的測試流程，官網上也有對應的文檔示例，具體寫法會有所不一樣，但思想大同小異，咱們只要照着寫個兩三遍就會了。

結語

因此，最終咱們要怎麼應用到實際工做中呢？em...我想大部分公司的後臺管理系統應該是一個施展才華的好地方。至於覆蓋率，多寫多覆蓋羅，對於大部分前端同窗來講沒必要太較真，畢竟咱們是要寫需求的啊。最後的最後，其實不少東西都不難，只是咱們沒碰觸過因此總以爲高不可攀。常言道會者不難，難者不會，說的就是這個道理（大讚無疆👍👍👍。。。）。

ps: 若有須要上述代碼的請點擊這裏：單元測試 demo 傳送門 ps: 後面我會每個月寫篇【大白話】系列文章，用通俗的語言讓你看了就懂，歡迎關注。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。