vue單元測試Mocha + Chai + Vue-Test-Utils

1、定義

Mocha：定義JavaScript測試模塊的測試框架。做用是：配合chai斷言庫，運行測試腳本進行單元測試。 一個測試腳本包含一個或多個describe(測試模塊), 每一個describe(測試模塊)包括一個或多個it(測試用例)。同時，describe測試模塊是一個函數, 具備兩個參數，其中第一個參數是測試模塊的名稱(通常狀況下寫測試組件的名稱), 第二個參數是一個實際執行的函數；it測試用例也是一個函數, 第一個參數是測試用例的名稱(一般寫你的斷言結果,), 第二個參數是一個實際執行的函數。

Chai：斷言庫，所謂斷言, 就是判斷源碼的實際執行結果與預期結果是否一致, 若是不一致, 就會拋出錯誤。它具備兩種風格分別是TDD和BDD。 TDD風格:：先編寫單元測試用例代碼，在開發功能代碼。它的斷言方式有：assert。 BDD風格：先編寫開發功能代碼，在編寫單元測試。它的斷言方式有：expect和should。 其中，expect使用構造函數來建立斷言對象實例，而should是要新增方法來實現斷言（因此should不支持IE）；expect直接指向chai.expect，而should則是chai.should()。我的建議使用expect，兼容性高。

Vue-test-utils：是Vue.js官方的單元測試實用工具庫, 提供不少便捷的接口, 好比掛載組件, 設置Props, 發送emit事件等操做。

2、安裝

建立vue項目的時候將Uint Testing選中，生成的項目就是自動集成，也能夠本身安裝相關依賴而後使用

3、API

一、Mocha： describe塊稱爲"測試套件"(test suite), 表示一組相關的測試. 它是一個函數, 第一個參數是測試套件的名稱(一般寫測試組件的名稱, 這裏即爲Counter.js), 第二個參數是一個實際執行的函數. it塊稱爲"測試用例"(test case), 表示一個單獨的測試, 是測試的最小單位. 它也是一個函數, 第一個參數是測試用例的名稱(一般描述你的斷言結果, 這裏即爲"點擊按鈕後, count的值應該爲1"), 第二個參數是一個實際執行的函數.

Mocha在describe塊中提供了四個鉤子: before(), after(), beforeEach(), afterEach(). 它們會在如下時間執行

經常使用的方法：

• Slow（Number）：設置時間。當運行時間超過Number,會被標紅。
• Timeout（Number）：設置測試用例的最大超時時間。若是執行時間超過了最大超時時間，測試結果將爲錯誤。
• Retries（Number）：設置測試失敗後, 測試重試的次數

二、Chai： 經常使用的屬性：

• .not：對以後的斷言取反
• .a/an：判斷被測試的值的類型
• .Above（value）:判斷斷言目標的值是否大於（超過）value
• .least（value）:判斷斷言目標的值不小於（大於或等於）value
• .below（value）:判斷斷言目標的值是否小於value
• .most（value）：判斷斷言目標的值不大於（小於或等於）value
• .Within(start, finish)：斷言目標的值在某個區間內
• .equal(value)：判斷斷言目標的值是否徹底等於 value

三、Vue-test-utils： 經常使用的屬性：

• vm：訪問掛載好的vue組件中的方法和屬性。 經常使用的方法：
• mount()：掛載當前組件實例；
• shallowMount()：掛載當前組件實例和能夠掛載子組件；
• find()：返回匹配的選擇器，可使用任何有效的選擇器。
• Trigger()：監聽觸發事件
• setData()：設置data的屬性並強制更新它的值
• Text()：返回實例對象中的文本內容
• Html()：返回實例對象中DOM 節點的 HTML 字符串

4、實例

chai的一些語法使用

mocha Demo

第一個用例獲取組件裏面的文字，判斷文字裏面是否包含msg 第二個用例使用不一樣數字計算1000次，輸出計算時間，可測試性能

結果：

加入把第二個測試用例的對比數字改爲1000，結果：

就會出現斷言拋錯，能夠看到對錯結果的對比及所在文件位置