Vue.js—單元測試
Vue.js——測試
這裡採用的是Vue官方工具（Vue-CLI）搭建出來的專案，在這個搭建工具中推薦的兩種測試分別是
- 端到端的測試 E2E
- 單元測試 Unit Test
端到端的測試（E2E）
E2E或者端到端（End-To-End）或者UI測試是一種測試方法，它用來測試一個應用從頭到尾的流程是否和設計時候所想的一樣。
簡而言之，它從一個使用者的角度出發，認為整個系統都是一個黑箱，只有UI會暴露給使用者。
單元測試（Unit Test）
測試驅動開發（TDD：Test-Driven Development），單元測試就不陌生。
單元測試是用來對一個模組、一個函式或者一個類
比如寫個加法函式add（a,b）{return a+b}，我們可以編寫出以下幾個
測試用例如：
輸入1和1，期待返回結果是2；
輸入非數值型別，比如None、[]、{}，期待丟擲異常。
把上面的測試用例放到一個測試模組裡，就是一個完整的單元測試。
如果單元測試通過，說明我們測試的這個函式能夠正常工作。如果單元測試不通過，要麼函式有bug，要麼測試條件輸入不正確，總之，需要修復使單元測試能夠通過。
那在Vue中的單元測試中主要使用兩個工具分別是
（Karma+Mocha）
Karma
Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具在Vue中的主要作用是將專案執行在各種主流Web瀏覽器進行測試。
換句話說，它是一個測試工具，能讓你的程式碼在瀏覽器環境下測試。需要它的原因在於，你的程式碼可能是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來；另外，瀏覽器有相容問題，karma提供了手段讓你的程式碼自動在多個瀏覽器（chrome，firefox，ie等）環境下執行。如果你的程式碼只會執行在node端，那麼你不需要用karma。
Mocha
Mocha（發音摩卡）是一個測試框架，在vue-cli中配合
Mocha本身不帶斷言庫，所以必須先引入斷言庫，Chai斷言庫實現單元測試。
Mocha的常用命令和用法不算太多，而Chai斷言庫可以看Chai.js斷言庫API中文文件，很簡單，多查多用就能很快掌握。
斷言庫
所謂"斷言"，就是判斷原始碼的實際執行結果與預期結果是否一致，如果不一致就丟擲一個錯誤。下面這句斷言的意思是，呼叫add(1, 1)，結果應該等於2。
var expect = require('chai').expect;
expect(1+1)).to.be.equal(2);
Chai是一種斷言庫(http://chaijs.com/)
所有的測試用例（it塊）都應該含有一句或多句的斷言。它是編寫測試用例的關鍵。斷言功能由斷言庫來實現。
Chai的基本使用
expect(4 + 5).to.be.equal(9); //判斷4+5等於9 true
expect(4 + 5).to.be.not.equal(10); //判斷4+5不等於10 true
expect({ bar: 'baz' }).to.be.deep.equal({ bar: 'baz' }); //深度判斷是否相等
expect(true).to.be.ok; //判斷是true
expect(false).to.not.be.ok; //判斷是false
// 判斷型別
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
//判斷是否包含
expect([1,2,3]).to.include(2);Vue中使用測試步驟（一）
1.在Node環境下安裝Vue-CLI
npm install -g vue-cli
2.通過Vue-CLI初始化專案檔案，命令如下
vue init webpack testTodo
- 可以執行初始化的測試
npm run unit
Vue腳手架已經初始化了一個
HelloWorld.spec.js的測試檔案去測試HelloWrold.vue, 你可以在test/unit/specs/HelloWorld.spec.js下找到這個測試檔案.(提示: 將來所有的測試檔案, 都將放specs這個目錄下, 並以測試指令碼名.spec.js結尾命名!)
Vue中使用測試步驟（二）
4*.安裝Vue.js 官方的單元測試實用工具庫(方便在node環境下操作Vue)
npm install --save-dev @vue/[email protected]
- 做一個TodoMVC 完成檢視、增加、刪除、修改功能
每完成一個功能就做一個測試
教材/學習資料
視訊教學：Vue單元測試
學習檔案連結：https://pan.baidu.com/s/1Uwja... 密碼：8v9c
原文地址：https://segmentfault.com/a/1190000016710582