記一次使用mocha作單元測試

爲何要使用mocha

我寫了一個有向無環圖，可是無法驗證我寫的代碼時正確的。因此引入單元測試，選擇mocha是由於比較多人用。文檔比較全

參考文檔

• Mocha官網教程
• chai 斷言庫
• 阮一峯Mocha教程
• nyc 測試覆蓋率
• @babel/register 即時編譯 將import export等轉爲require
• Mocha-phantom

mocha使用

• 安裝mocha
  • yarn add mocha -D
• 建立test文件夾
• 編寫代碼
• 在package.json中的scripts上添加"test": "mocha --require --require @babel/register src/test"
  • 若是想要在mocha測試文件中使用import語法 須要安裝@babel/register(babel-register模塊改寫require命令，爲它加上一個鉤子。此後，每當使用require加載.js、.jsx、.es和.es6後綴名的文件，就會先用Babel進行轉碼, babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，因爲它是實時轉碼，因此只適合在開發環境使用。)

代碼示例
import { expect } from 'chai';

import chai from 'chai';

const should = chai.should();

import { isDag } from '../utils/IsDAG';

describe('是不是有向無環圖測試', function() {
    this.timeout(50000); // 異步請求須要設置超時時間，否則會報超時錯誤
    it('是Dag測試', function(done) {
        const graph = [
            {
                source: 1,
                target: 2
            },
            {
                source: 1,
                target: 3
            }
        ];
        const result = isDag(graph);

        expect(result).to.equal(true);
        done();
    });
    
    it('異步請求測試', function(done) {
        const graph = [
            {
                source: 1,
                target: 2
            },
            {
                source: 1,
                target: 3
            }
        ];

        setTimeout(() => {
            const result = isDag(graph);

            expect(result).to.equal(true);
            done();
        }, 2000);
        
    });
    
    it('不是Dag測試-沒有根節點', function(done) {
        const graph = [
            {
                source: 1,
                target: 2
            },
            {
                source: 2,
                target: 3
            },
            {
                source: 3,
                target: 1
            }
        ];
        const result = isDag(graph);

        result.should.equal(false);
        done();
    });
    
    it('是Dag測試-只有一個點', function(done) {
        const graph = [
            {
                source: 1
            }
        ];
        const result = isDag(graph);
        if (result) {
            done();
        } else {
            done('錯誤');
        }
    });
});
複製代碼

斷言庫的使用

• 使用chai斷言庫(集合了Assert/Expect和should三種斷言庫)
• 安裝 yarn add chai
• 使用expect和should

斷言庫expect和should對比

一、expect的實現侵入性比較低，expect方法會返回一個代理對象，上面綁定了一些能夠用來進行斷言的方法。
二、should的實現是將should一類的方法直接注入到全部的對象裏，破壞性比較高。若是你本身定義了一些和should一類同名的方法就悲劇了

引用expect和should斷言庫
var chai = require('chai')
  , expect = chai.expect
  , should = chai.should();
// Or
import { expect } form 'chai';
import chai.should(); form 'chai';
const should = chai.should();

// 使用expect
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);

// 使用should
foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.lengthOf(3);

複製代碼

測試覆蓋率

• nyc
• Istanbul

nyc使用

• 安裝nyc
  • yarn add nyc -D
  • 在package.json中的scripts上的"test"作修改： nyc mocha --require @babel/register src/test
  • yarn test 就行

模擬瀏覽器環境

• Phantom(PhantomJS的功能，就是提供一個瀏覽器環境的命令行接口，你能夠把它看做一個「虛擬瀏覽器」，除了不能瀏覽，其餘與正常瀏覽器同樣，能夠用來作網頁爬取)
• Mocha-phantom
• 使用Mocha-phantom
  • mocha init 目錄名稱
  • 修改index.html文件

    if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
    else { mocha.run(); }
    複製代碼

  • 設置script: "test-phantomjs": "./node_modules/.bin/mocha-phantomjs src/test/IsDagTest/index.html"
  • yarn test-phantomjs

運行測試結果