Vue.js—單元測試

時間 2019-11-07

標籤 vue.js vue 單元測試欄目 JavaScript 简体版

原文原文鏈接

Vue.js——測試

這裏採用的是Vue官方工具（Vue-CLI）搭建出來的項目，在這個搭建工具中推薦的兩種測試分別是vue

端到端的測試 E2E
單元測試 Unit Test

端到端的測試（E2E）

E2E或者端到端（End-To-End）或者UI測試是一種測試方法，它用來測試一個應用從頭至尾的流程是否和設計時候所想的同樣。
簡而言之，它從一個用戶的角度出發，認爲整個系統都是一個黑箱，只有UI會暴露給用戶。node

單元測試（Unit Test）

測試驅動開發（TDD：Test-Driven Development），單元測試就不陌生。
單元測試是用來對一個模塊、一個函數或者一個類來進行正確性檢驗的測試工做。
好比寫個加法函數add（a,b）{return a+b}，咱們能夠編寫出如下幾個
測試用例如：
輸入1和1，期待返回結果是2；
輸入非數值類型，好比None、[]、{}，期待拋出異常。
把上面的測試用例放到一個測試模塊裏，就是一個完整的單元測試。
若是單元測試經過，說明咱們測試的這個函數可以正常工做。若是單元測試不經過，要麼函數有bug，要麼測試條件輸入不正確，總之，須要修復使單元測試可以經過。
那在Vue中的單元測試中主要使用兩個工具分別是（Karma+Mocha）webpack

Karma

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具在Vue中的主要做用是將項目運行在各類主流Web瀏覽器進行測試。 web

換句話說，它是一個測試工具，能讓你的代碼在瀏覽器環境下測試。須要它的緣由在於，你的代碼多是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來；另外，瀏覽器有兼容問題，karma提供了手段讓你的代碼自動在多個瀏覽器（chrome，firefox，ie等）環境下運行。若是你的代碼只會運行在node端，那麼你不須要用karma。chrome

Mocha

Mocha（發音摩卡）是一個測試框架，在vue-cli中配合
Mocha自己不帶斷言庫，因此必須先引入斷言庫，Chai斷言庫實現單元測試。 vue-cli

Mocha的經常使用命令和用法不算太多，而Chai斷言庫能夠看Chai.js斷言庫API中文文檔，很簡單，多查多用就能很快掌握。npm

斷言庫

所謂"斷言"，就是判斷源碼的實際執行結果與預期結果是否一致，若是不一致就拋出一個錯誤。下面這句斷言的意思是，調用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結尾命名!)