使用mocha前端單元測試

hidogs 發布于2019-08-22 10:44 / 872人閱讀

摘要：需求因為之前的項目沒有涉及到測試這一塊沒有完整的測試體系。最近看了阮一峰老師的測試框架實例教程來總結一下。小試牛刀具體的教程在阮一峰老師的博客上有介紹，這里就不再贅述。

Mocha

需求

因為之前的項目沒有涉及到測試這一塊,沒有完整的測試體系。最近看了阮一峰老師的測試框架 Mocha 實例教程
來總結一下。

小試牛刀

具體的教程在阮一峰老師的博客上有介紹，這里就不再贅述。
以自己的github上的小工具klocation.js做了個示例：

/**
 * Created by caozheng on 2016/11/28.
 */
require("./../KLoction");
var expect = require("chai").expect;


(function (win) {
    var testUrl = "https://github.com/karzanOnline?a=1";
    describe("constructor", function () {
        var testResult =  KLocation(testUrl);

        describe("#output", function () {
            it("return value is an object", function () {
                expect(testResult).to.be.an("object")
            });
            it("property url is string", function () {
                expect(testResult.url).to.be.a("string")
            });
            it("property port is number", function () {
                expect(testResult.port).to.be.a("number")
            });
            it("property host is string", function () {
                expect(testResult.host).to.be.a("string")
            });
            it("property protocol is string", function () {
                expect(testResult.protocol).to.be.a("string")
            });
            it("property pathname is string", function () {
                expect(testResult.pathname).to.be.a("string")
            });
        });

        describe("#method", function () {
            it("getParam", function () {
                expect(testResult.getParam()).to.be.deep.equal({a : "1"})
            });
            it("getProtocol", function () {
                expect(testResult.getProtocol()).to.be.equal("https:")
            });
            it("getHost", function () {
                expect(testResult.getHost()).to.be.equal("github.com")
            });
            it("getPort", function () {
                expect(testResult.getPort()).to.be.empty;
            });
            it("getPathname", function () {
                expect(testResult.getPathname()).to.be.equal("/karzanOnline")
            })

        })

    })

})(this);

在github上還要去https://travis-ci.org注冊一下,然后通過配置.travis.yml文件(確定使用的語言和node的版本)，如果測試通過就會生成一個圖標

然后把url放到README.md就可以了。

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/);

mochawesome

這里阮一峰老師給的code是(三個步驟改進一下)

$ npm install --save-dev mochawesome
$ ../node_modules/.bin/mocha --reporter mochawesome

首先安裝mochawesome必須！但是第二步可以通過package.json來設置，由于node_modules/.bin/目錄會在運行時加入系統的PATH變量，因此在運行npm時，就可以不帶路徑，直接通過命令來調用這些腳本。

根目錄創建test文件(mocha.opts配置項加一下)

放入測試的腳本

package.json配置scripts

"scripts": {
    "test": "mocha --reporter mochawesome"
  },

將會在同級目錄生成mochawesome-reports，訪問html即可。

異步測試

var fetch = require ("node-fetch");
var expect = require("chai").expect;

it("異步請求應該返回一個對象", function (done) {
    return fetch("https://api.github.com")
        .then(function (res) {
          return res.json()
        }).then(function (json) {
          expect(json).to.be.an("object");
          done();
        })
    })

測試用例管理

it.only :如果測試代碼中有only，那么只有帶有only方法的測試用例會運行。

it.skip :與only相反

GPU云服務器云服務器單元測試-mocha-jasmine 單元-mocha-jasmine 單元測試單元測試規范

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

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

前端單元測試實現教程 mocha + mochawesome + istanbul + sinon

摘要：為什么要寫單元測試減少提高代碼質量，保證你的代碼是可測試的放心重構當你每個方法都寫了單元測試的時候，你每一個改動都會影響相應的單元測試，這樣你不用費盡心思的考慮哪里會有影響，特別是復雜項目或非核心功能不易被測試到，從而導致的產生。為什么要寫單元測試減少bug 提高代碼質量，保證你的代碼是可測試的放心重構當你每個方法都寫了單元測試的時候，你每一個改動都會影響相應的單元測試，這...

AaronYuan 2019-08-22 15:36 評論0 收藏0
前端單元測試探索

摘要：單元測試的首要目的不是為了能夠編寫出大覆蓋率的全部通過的測試代碼，而是需要從使用者調用者的角度出發，嘗試函數邏輯的各種可能性，進而輔助性增強代碼質量測試是手段而不是目的。本文已發布在稀土掘金轉載請注明原文鏈接：https://github.com/ecmadao/Co... 雖然很多公司有自己的測試部門，而且前端開發大多不涉及測試環節，但鑒于目前前端領域的快速發展，其涉及面越來...

陳江龍 2019-08-20 11:05 評論0 收藏0
測試你的前端代碼 - part2（單元測試）

摘要：單元測試上一節有討論過，單元測試就是以代碼單元為單位進行測試，代碼單元可以是一個函數，一個模塊，或者一個類。單元測試是最容易理解也最容易實現的測試方式。在寫單元測試的時候，盡量將你的單元測試獨立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

daydream 2019-05-29 16:59 評論0 收藏0
測試你的前端代碼 - part2（單元測試）

摘要：單元測試上一節有討論過，單元測試就是以代碼單元為單位進行測試，代碼單元可以是一個函數，一個模塊，或者一個類。單元測試是最容易理解也最容易實現的測試方式。在寫單元測試的時候，盡量將你的單元測試獨立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

shadajin 2019-08-20 15:21 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

kid143 2019-08-19 18:17 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

godlong_X 2019-05-29 16:57 評論0 收藏0