摘要：使用可以快速生成一個(gè)項(xiàng)目，其中包含了和以及覆蓋率統(tǒng)計(jì)的配置參考一個(gè)創(chuàng)建測(cè)試腳本的快速方法其他參考資料前端自動(dòng)化測(cè)試概覽測(cè)試之使用對(duì)項(xiàng)目進(jìn)行單元測(cè)試

測(cè)試可以提供快速反饋，根據(jù)測(cè)試用例覆蓋代碼，從而提升代碼開發(fā)效率和質(zhì)量。根據(jù)投入產(chǎn)出價(jià)值，通常迭代較快的業(yè)務(wù)邏輯不做測(cè)試用例，對(duì)通用常用的代碼基本組件或框架需要編寫測(cè)試。

在 2018 年年初對(duì)測(cè)試工具的整體回顧：
An Overview of JavaScript Testing in 2018

測(cè)試驅(qū)動(dòng)開發(fā)的基本思想就是在開發(fā)功能代碼之前，先編寫測(cè)試代碼。也就是說在明確要開發(fā)某個(gè)功能后，首先思考如何對(duì)這個(gè)功能進(jìn)行測(cè)試，并完成測(cè)試代碼的編寫，然后編寫相關(guān)的代碼滿足這些測(cè)試用例。然后循環(huán)進(jìn)行添加其他功能，直到完全部功能的開發(fā)。(mocha示例)

//mocha
suite("Array", function() {
  setup(function() {
    // ...
  });

  suite("#indexOf()", function() {
    test("should return -1 when not present", function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

Behavior Driven Development，行為驅(qū)動(dòng)開發(fā)是一種敏捷軟件開發(fā)的技術(shù)，它鼓勵(lì)軟件項(xiàng)目中的開發(fā)者、QA和非技術(shù)人員或商業(yè)參與者之間的協(xié)作。

與一般的自動(dòng)化測(cè)試（如單元測(cè)試、服務(wù)測(cè)試、UI 測(cè)試）不一樣的是，BDD 是由多方參與的測(cè)試開發(fā)方式。如在使用 Protractor 寫 Angular 的 E2E 測(cè)試的時(shí)候，所以的測(cè)試都是前端測(cè)試人員編寫的。BDD 最重要的一個(gè)特性是：由非開發(fā)人員編寫測(cè)試用例，而這些測(cè)試用例是使用自然語言編寫的 DSL（領(lǐng)域特定語言）。換多話來說，業(yè)務(wù)人員、測(cè)試人員、客戶等利益相關(guān)者，以習(xí)慣的方式編寫相關(guān)的測(cè)試用例，再由開發(fā)人員去實(shí)現(xiàn)相關(guān)的測(cè)試。
(Jasmine示例)

//Jasmine
describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

單元測(cè)試準(zhǔn)則27條

node assert

const assert = require("assert");
assert.equal(1, "1");//ok

const obj1 = {a: {b: 1}};
const obj2 = {a: {b: 1}};
assert.deepEqual(obj1, obj2);//ok

shouldjs

should(null).not.be.ok();
({ a: 10}).should.be.eql({ a: 10 });
"ab".should.be.equalOneOf(["a", 10, "ab"]);

chai

//should
chai.should();

foo.should.be.a("string");
foo.should.equal("bar");
foo.should.have.lengthOf(3);
tea.should.have.property("flavors")
  .with.lengthOf(3);

//except
var expect = chai.expect;
expect(foo).to.be.a("string");
expect(foo).to.equal("bar");
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property("flavors")
  .with.lengthOf(3);

//assert
var assert = chai.assert;
assert.typeOf(foo, "string");
assert.equal(foo, "bar");
assert.lengthOf(foo, 3)
assert.property(tea, "flavors");
assert.lengthOf(tea.flavors, 3);

Mock

Mock.mock({"number|1-100": 100})
//{"number": 30}
Mock.mock({"regexp": /d{5,10}/})
//{"regexp": "365355673"}
Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})
/*
{
  "object": {
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
}
*/
Random.date()
//"2007-10-24"
Random.image("200x100", "#4A7BF7", "Hello")

cypress 在瀏覽器中邊預(yù)覽執(zhí)行可視化測(cè)試用例，像selenium一樣模擬用戶操作，可以接入Mocha和chai

describe("My First Test", function() {
  it("clicking "type" navigates to a new url", function() {
    cy.visit("https://example.cypress.io")

    cy.contains("type").click()

    // Should be on a new URL which includes "/commands/actions"
    cy.url().should("include", "/commands/actions")
  })
})

Nightmare
基于 Electron 的框架，針對(duì) Web 自動(dòng)化測(cè)試和爬蟲。

webdriverio
Node.js的下一代WebDriver測(cè)試自動(dòng)化框架,參考官方代碼示例

jsPerf
benchmark.js

持續(xù)集成是一種非常優(yōu)秀的多人開發(fā)實(shí)踐，通過代碼push觸發(fā)鉤子，實(shí)現(xiàn)自動(dòng)運(yùn)行編譯、測(cè)試等工作。接入持續(xù)集成后，我們的每一次push代碼，每個(gè)Merge Request都會(huì)生成對(duì)應(yīng)的測(cè)試結(jié)果，項(xiàng)目的其他成員可以很清楚地了解到新代碼是否影響了現(xiàn)有的功能，在接入自動(dòng)告警后，可以在代碼提交階段就快速發(fā)現(xiàn)錯(cuò)誤，提升開發(fā)迭代效率。

持續(xù)集成會(huì)在每次集成時(shí)提供一個(gè)幾乎空白的虛擬機(jī)器，并拷貝用戶提交的代碼到機(jī)器本地，通過讀取用戶項(xiàng)目下的持續(xù)集成配置，自動(dòng)化的安裝環(huán)境和依賴，編譯和測(cè)試完成后生成報(bào)告，在一段時(shí)間之后釋放虛擬機(jī)器資源。

Travel CI 開源持續(xù)集成構(gòu)建項(xiàng)目,采用yaml格式。

Coveralls nodejs下面的代碼測(cè)試覆蓋率，原理是通過istanbul生成測(cè)試數(shù)據(jù)，上傳到coveralls網(wǎng)站上，然后以badge的形式展示出來

目前比較流行js校驗(yàn)工具有 JSLint、JSHint、JSCS、ESLint, 它們之前的差異比較可以參考 A Comparison of JavaScript Linting Tools，推薦使用
ESlint。
代碼風(fēng)格檢查同樣也可以集成到 ci，只需要在 ci 命令前追加檢查命令即可。以 eslint 為例：

"scripts": {
    // ..
    "lint": "eslint .",
    "cov": "istanbul cover .",
    "ci": "tnpm run lint && TEST_TIMEOUT=60000 istanbul cover ."
 }

此時(shí)構(gòu)建會(huì)先做代碼風(fēng)格檢查，再做單元測(cè)試、覆蓋率統(tǒng)計(jì)，如代碼風(fēng)格檢查失敗，會(huì)直接導(dǎo)致構(gòu)建中斷。

Jest
Facebook 出品的一個(gè)測(cè)試框架，相對(duì)其他測(cè)試框架，其一大特點(diǎn)就是就是內(nèi)置了常用的測(cè)試工具，比如自帶斷言、測(cè)試覆蓋率工具。與React搭配更加。 (示例)

karma
一個(gè)測(cè)試集成框架，可以方便地以插件的形式集成測(cè)試框架、測(cè)試環(huán)境、覆蓋率工具等等。與Angular搭配更加。(使用 vue-cli 可以快速生成一個(gè) Vue 項(xiàng)目，其中包含了 Webpack 和 Karma 以及覆蓋率統(tǒng)計(jì)的配置)

cucumber & cuketest
參考 一個(gè)創(chuàng)建 Cucumber. js 測(cè)試腳本的快速方法

其他參考資料：
前端自動(dòng)化測(cè)試概覽
E2E 測(cè)試之 Cypress
使用 Jest + Enzyme 對(duì) React 項(xiàng)目進(jìn)行單元測(cè)試
Testing Strategies for React and Redux