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