搭建Karma+Jasmine的自動化單元測試

Zenquan發表於2019-03-01
ASM

最近在打算將以前的程式碼進行重構，過程中發現自己不寫自動化測試程式碼，而是手動的寫，這樣並不好，所以就學了Karma+Jasmine的自動化單元測試，以後寫程式碼儘量要寫自動化單元測試，也要測一下istanbul程式碼覆蓋率。

據我瞭解，Nodejs領域: Jasmine做單元測試，Karma自動化完成單元測試，Grunt啟動Karma統一專案管理，Yeoman最後封裝成一個專案原型模板，npm做nodejs的包依賴管理，bower做javascript的包依賴管理。

Karma的介紹

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具可用於測試所有主流Web瀏覽器，也可整合到CI（Continuous integration）工具，也可和其他程式碼編輯器一起使用。這個測試工具的一個強大特性就是，它可以監控(Watch)檔案的變化，然後自行執行，通過console.log顯示測試結果。

Karma的安裝

我的開發環境：

  • win7 64bit,
  • node v8.11.2
  • npm 5.6.0

1、全域性安裝karma、Jasmine-core、Karma-Jasmine

npm install -g karma
npm install -g Jasime-core 
npm install -g karma-Jasmine
複製程式碼

2、區域性局安裝karma、Jasmine-core、Karma-Jasmine

npm install --save-dev karma
npm install --save-dev Jasime-core 
npm install --save-dev karma-Jasmine
複製程式碼

3、測試是否安裝成功

karma start
複製程式碼
搭建Karma+Jasmine的自動化單元測試

4、Karma + Jasmine配置

karma init
複製程式碼
搭建Karma+Jasmine的自動化單元測試

自動化單元測試

1). 建立原始檔：用於實現某種業務邏輯的檔案，就是我們平時寫的js指令碼
有一個需求，要實現單詞倒寫的功能。如：”ABCD” ==> “DCBA”

//src/index.js
function reverse(word){
    return word.split("").reverse().join("");
}
複製程式碼

2). 建立測試檔案：符合jasmineAPI的測試js指令碼

//test/test.js
describe("A suite of basic functions", function() {
    it("reverse word",function(){
        expect("DCBA").toEqual(reverse("ABCD"));
    });
});
複製程式碼

3). 修改karma.conf.js配置檔案
我們這裡需要修改：files和exclude變數

files: [`./src/*.js`],
exclude: [`karma.conf.js`],
複製程式碼

4). 啟動karma
單元測試全自動執行

karma start karma.conf.js
複製程式碼
搭建Karma+Jasmine的自動化單元測試

Karma和istanbul程式碼覆蓋率

1、全域性安裝istanbul依賴karma-coverage

npm install -g karma-coverage
複製程式碼

2、區域性安裝istanbul依賴karma-coverage

npm install --save-dev karma-coverage
複製程式碼

3、修改karma.conf.js配置檔案

reporters: [`progress`,`coverage`],
preprocessors : {`src.js`: `coverage`},
coverageReporter: {
type : `html`,
dir : `coverage/`
}
4、啟動karma start

在工程目錄下面找到index.html檔案，coverage/chrome/index.html

搭建Karma+Jasmine的自動化單元測試

接下來，我們修改src.js，增加一個if分支

function reverse(word){
    if(word==`AAA`) return "BBB";
    return word.split("").reverse().join("");
}
複製程式碼

再看覆蓋率報告，下降得有點恐怖

搭建Karma+Jasmine的自動化單元測試

出現的坑

千萬記住要先全域性安裝再區域性安裝，不然老是報錯：jasmine-core模組未找到

搭建Karma+Jasmine的自動化單元測試

原文：搭建Karma+Jasmine的自動化單元測試,歡迎star，歡迎交流。

專案地址KarmaDemo

參考：
Error: Cannot find module `jasmine-core`

相關文章