新前端124vue單元測試vue測試

1、Vue單元測試學(xué)習(xí)目標(biāo)為什么測試Vue中的測試為什么需要測試 測試是完善的研發(fā)體系中不可或缺的一環(huán)。前端同樣需要測試，你的CSS改動可能導(dǎo)致頁面錯位、JS改動可能導(dǎo)致功能不正常。盡管測試領(lǐng)域工具層出不窮，在前端的自動化測試上面卻實施并不廣泛，但是前端偏向界面所以還是有很多人依舊以手工測試為主。前端測試 雖然很多公司有自己的測試部門，而且前端開發(fā)大多不涉及測試環(huán)節(jié)，但鑒于目前前端領(lǐng)域的快速發(fā)展，其涉及面越來越廣，前端開發(fā)者們必然不能止步于目前的狀態(tài)。我認為學(xué)好前端測試，不僅僅有利于自己整理需求、檢查代碼，更是一個優(yōu)秀開發(fā)者的體現(xiàn)。Vue中的測試 我們這里采用的是Vue官方工具（Vue-CLI）搭

2、建出來的項目，在這個搭建工具中推薦的兩種測試分別是端到端的測試（E2E）和單元測試（Unit Test）端到端測試（E2E） E2E或者端到端（End-To-End）或者UI測試是一種測試方法，它用來測試一個應(yīng)用從頭到尾的流程是否和設(shè)計時候所想的一樣。簡而言之，它從一個用戶的角度出發(fā)，認為整個系統(tǒng)都是一個黑箱，只有UI會暴露給用戶。單元測試（Unit Test） 測試驅(qū)動開發(fā)（TDD：Test-Driven Development），單元測試就不陌生。單元測試是用來對一個模塊、一個函數(shù)或者一個類來進行正確性檢驗的測試工作。比如寫個加法函數(shù)add（a,b）return a+b，我們可以編寫出以下

3、幾個測試用例如：輸入1和1，期待返回結(jié)果是2；輸入非數(shù)值類型，比如None、，期待拋出異常。把上面的測試用例放到一個測試模塊里，就是一個完整的單元測試。如果單元測試通過，說明我們測試的這個函數(shù)能夠正常工作。如果單元測試不通過，要么函數(shù)有bug，要么測試條件輸入不正確，總之，需要修復(fù)使單元測試能夠通過。 那在Vue中的單元測試中主要使用兩個工具分別是（Karma+Mocha）Karma Karma是一個基于Node.js的JavaScript測試執(zhí)行過程管理工具（Test Runner）。該工具在Vue中的主要作用是將項目運行在各種主流Web瀏覽器進行測試。 換句話說，它是一個測試工具，能讓你的

4、代碼在瀏覽器環(huán)境下測試。需要它的原因在于，你的代碼可能是設(shè)計在瀏覽器端執(zhí)行的，在node環(huán)境下測試可能有些bug暴露不出來；另外，瀏覽器有兼容問題，karma提供了手段讓你的代碼自動在多個瀏覽器（chrome，firefox，ie等）環(huán)境下運行。如果你的代碼只會運行在node端，那么你不需要用karma。Mocha Mocha（發(fā)音摩卡）是一個測試框架，在vue-cli中配合Mocha本身不帶斷言庫，所以必須先引入斷言庫，Chai斷言庫實現(xiàn)單元測試。 Mocha的常用命令和用法不算太多，而Chai斷言庫可以看Chai.js斷言庫API中文文檔，很簡單，多查多用就能很快掌握。斷言庫 所謂斷言，就

5、是判斷源碼的實際執(zhí)行結(jié)果與預(yù)期結(jié)果是否一致，如果不一致就拋出一個錯誤。下面這句斷言的意思是，調(diào)用add(1, 1)，結(jié)果應(yīng)該等于2。var expect = require(chai).expect;expect(1+1).to.be.equal(2); Chai是一種斷言庫( ) 所有的測試用例（it塊）都應(yīng)該含有一句或多句的斷言。它是編寫測試用例的關(guān)鍵。斷言功能由斷言庫來實現(xiàn)。Chai的基本使用expect(4 + 5).to.be.equal(9); /判斷4+5等于9 trueexpect(4 + 5).to.be.not.equal(10); /判斷4+5不等于10 trueexpe

6、ct( bar: baz ).to.be.deep.equal( bar: baz ); /深度判斷是否相等expect(true).to.be.ok; /判斷是trueexpect(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環(huán)境下安裝Vue-CLInpm install -g vue-cli2.通過Vue-CLI初始化項目文件，命令如下vue init webpack testTodo3. 可以運行初始化的測試npm run unit Vue腳手架已經(jīng)初始化了一個HelloWorld.spec.js的測試文件去測試HelloWrold.vue, 你可以在test/unit/specs/HelloWorld.spec.js下找到這個測試文件.(提示: 將來所有的測試文件, 都將放specs這個目錄下, 并以測試腳本名.spec.js結(jié)尾命名!)Vue中使用測試步驟（二）4*.安裝Vue.js 官方的單元測試實用工具庫(