前端測試框架mocha使用小結

asoren 發布于2019-08-22 14:51 / 2281人閱讀

摘要：稱為測試用例，表示一個多帶帶的測試，是測試的最小單位。它使用的瀏覽器環境，通過事件監聽的方式檢測測試的執行過程。前端的自動化測試還需慢慢探索，任重而道遠。前端技術交流群歡迎加入

安裝

npm i -g mocha

npm i chai -D  //斷言庫

模塊測試

比如有一個add函數

//add.js
function add(a, b){
  return a + b
}
module.exports = add

新建一個測試文件add.test.js(一般測試文件命名都是以被測文件后加.test后綴)
describe:稱為"測試套件"（test suite），表示一組相關的測試。它是一個函數，第一個參數是測試套件的名稱（"加法函數的測試"），第二個參數是一個實際執行的函數。
it:稱為"測試用例"（test case），表示一個多帶帶的測試，是測試的最小單位。

// add.test.js
var add = require("./add.js")
var expect = require("chai").expect;

describe("add功能測試", function(){
  it("1 + 1 = 2", function(){
    expect(add(1, 1)).to.be.equal(2)  //斷言庫的用法
  })；
  it("返回值為數字", function(){
    expect(add(1, 1)).to.be.a("number")
  });
})

chai中的expect模塊的語法很接近自然語言的風格，常見的有:

// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: "baz" });

// 布爾值為true
expect("everthing").to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect("test").to.be.a("string");
expect({ foo: "bar" }).to.be.an("object");
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect("foobar").to.contain("foo");
expect({ foo: "bar", hello: "universe" }).to.include.keys("foo");

// empty
expect([]).to.be.empty;
expect("").to.be.empty;
expect({}).to.be.empty;

// match
expect("foobar").to.match(/^foo/);

以上方法可以很輕松的測試封裝的方法和模塊

基于瀏覽器的測試，如ajax

在這里使用我自己的ajax庫 baby-ajax
mocha-phantomjs:是一個 通過 PhantomJS 執行 mocha 瀏覽器環境測試的工具庫。它使用 PhantomJS 的瀏覽器環境，通過事件監聽的方式檢測 mocha 測試的執行過程。
mocha-phantomjs-core:是 mocha-phantomjs的核心依賴庫。作者將它多帶帶提取出來，是因為它也可以支持 SlimerJS。
SlimerJS :基于的 Gecko 內核(Firefox)的與 PhantomJS 的 API 幾乎相同的工具，而且SlimerJS在執行過程中默認會啟動有界面的瀏覽器窗體，可以看到整個執行過程

npm i baby-ajax mocha-phantomjs-core mocha-phantomjs -D

mocha init test

mocha會自己為我們創建測試模板，包含html，css，js

手動引用mocha.js，chai.js,和自己的測試js

//ajax.test.js
var Ajax = require("../example/static/ajax.js");
var expect = require("chai").expect;

expect(Ajax).to.be.an("object");

describe("get測試", function(done){
    Ajax.get("./data.json")
    .then(function(res){
        expect(res).to.have.include.keys("data","status") //返回值必須有兩個key，一個是data，一個是status
        done()
    }, function(){
         expect(res).to.have.include.keys("data","status")
         done()
    })
})

這樣就可以在node中模擬瀏覽器環境，從而可以獲取在瀏覽器中的對象，如window等

總結

使用mocha配合chai以及mocha-phantomjs可以很方便的對函數的執行進行一步一步的監控，數值的類型做限定。但是如果一旦設計到業務邏輯的測試和UI的測試，可能就有點力不從心了，業務功能測試需要數據源的支撐，一味的使用假數據很難覆蓋異常情況；而UI的測試雖然可以借助jq的trigger來模擬用戶行為，但是這顯然是個巨大的任務量，首先要在測試目錄下的html寫入需要測試的dom元素，再寫測試邏輯。可能一個小時就完成的UI需要一天或者更長的時間來寫測試邏輯。

前端UI的自動化測試還需慢慢探索，任重而道遠。 前端技術交流群：709397872（歡迎加入）

GPU云服務器云服務器單元測試-mocha-jasmine 前端框架前端技術框架最新前端框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92929.html

聊一聊前端自動化測試

摘要：在真正寫了一段時間的基礎組件和基礎工具后，才發現自動化測試有很多好處。有了自動化測試，開發者會更加信任自己的代碼。由于維護測試用例也是一大筆開銷畢竟沒有多少測試會專門幫前端寫業務測試用例，而前端使用的流程自動化工具更是沒有測試參與了。本文轉載自天貓前端博客，更多精彩文章請進入天貓前端博客查看前言為何要測試以前不喜歡寫測試，主要是覺得編寫和維護測試用例非常的浪費時間。在真正寫了...

wthee 2019-08-21 10:50 評論0 收藏0
探知js測試(3)

摘要：模塊測試模塊語法我這里提及一點。基本工程目錄一個良好的工程目錄，能夠幫助你測試成本降到最低。這一塊算是獨立于單元測試的。前面兩篇已經把，js測試的模式，框架，斷言庫基本介紹了一遍。這里，我們要上升到整體測試架構上來.首先，單元測試的對象是模塊，這里我們就要將自己測試目標調整到對模塊測試上來。所以，這里我們需要使用CommonJS或者es6的模塊的寫法了。另外需要了解,mocha框架測...

陳江龍 2019-08-19 17:36 評論0 收藏0
探知js測試(3)

摘要：模塊測試模塊語法我這里提及一點。基本工程目錄一個良好的工程目錄，能夠幫助你測試成本降到最低。這一塊算是獨立于單元測試的。前面兩篇已經把，js測試的模式，框架，斷言庫基本介紹了一遍。這里，我們要上升到整體測試架構上來.首先，單元測試的對象是模塊，這里我們就要將自己測試目標調整到對模塊測試上來。所以，這里我們需要使用CommonJS或者es6的模塊的寫法了。另外需要了解,mocha框架測...

pakolagij 2019-05-29 16:56 評論0 收藏0