摘要：本文只討論單測(cè)的范疇，對(duì)集成測(cè)試有興趣的話，可以看下的集成測(cè)試代碼。前端單測(cè)現(xiàn)狀測(cè)試本質(zhì)上就是假定一個(gè)輸入，然后判斷得到預(yù)期的輸出。

原文發(fā)于我的博客：https://github.com/hwen/blogS...

關(guān)于這個(gè) cnode 上就有個(gè)很有意思的討論

做個(gè)調(diào)查，你的 Node 應(yīng)用有寫(xiě)單測(cè)嗎？

看完這個(gè)應(yīng)該會(huì)有結(jié)論？如果沒(méi)有，就回帖跟別人探討下~

測(cè)試有分為

單元測(cè)試（單測(cè)）

集成測(cè)試

系統(tǒng)測(cè)試

主要區(qū)別是單測(cè)傾向于測(cè)試模塊內(nèi)部運(yùn)行邏輯及功能，集成測(cè)試傾向于模塊間互相組合跟調(diào)用的測(cè)試。
系統(tǒng)測(cè)試（當(dāng)然你要說(shuō)，還有自動(dòng)化測(cè)試）是對(duì)整個(gè)系統(tǒng)的測(cè)試，主要由測(cè)試人員而非開(kāi)發(fā)人員負(fù)責(zé)。

本文只討論單測(cè)的范疇，對(duì)集成測(cè)試有興趣的話，可以看下 Vue 的集成測(cè)試代碼。

測(cè)試本質(zhì)上就是假定一個(gè)輸入，然后判斷得到預(yù)期的輸出。而前端與后端相比，夾雜著瀏覽器 DOM 操作，異步請(qǐng)求，
瀏覽器兼容性等方面的。要我來(lái)說(shuō)，比后端寫(xiě)單測(cè)要麻煩多了。。。

不過(guò)現(xiàn)在前端的單測(cè)已經(jīng)發(fā)展得比較完善了，已經(jīng)有一套比較完整的工具鏈，來(lái)完成各種需求。

目前比較流行的測(cè)試框架有：

jasmine： 自帶斷言（assert），mock 功能

mocha：框架不帶斷言和mock功能，需要結(jié)合其他工具。mocha 是 tj 大神寫(xiě)的（tj 就是那個(gè)寫(xiě)了express、koa、n、co、ejs的人。。。）

用得比較多的就上面兩個(gè)，還有一些用得比較少的，比如 Qunit、intern

框架的實(shí)現(xiàn)原理其實(shí)就是檢測(cè)內(nèi)部運(yùn)行的代碼是否有拋出異常。而斷言庫(kù)如果沒(méi)有得到預(yù)期的輸入時(shí)，就會(huì)拋出異常，給框架檢測(cè)到。

PS.想要學(xué) mocha 和單測(cè)寫(xiě)法，最好的資源就是 express 框架的測(cè)試代碼（狼叔推薦，親測(cè)很不錯(cuò)）

chai：目前比較流行的斷言庫(kù)，支持 TDD（assert），BDD（expect、should）兩種風(fēng)格

shouldjs：也是 tj 寫(xiě)的，說(shuō)實(shí)話我比較喜歡這個(gè)，但是有坑。。。后面會(huì)說(shuō)到。。。

expectjs：基本是 shouldjs 的縮水版

assert：node 的核心模塊，node 環(huán)境可以直接使用

sinon.js：只用過(guò)這個(gè)，其他不大清楚。不過(guò)這個(gè)是目前最多人用的，基本夠了。支持 spies, stub, fake XMLHttpRequest, Fake server, Fake time，很強(qiáng)大

karma：Google Angular 團(tuán)隊(duì)寫(xiě)的，功能很強(qiáng)大，有很多插件

buster.js: 這個(gè)支持 node 環(huán)境，但目前還在 beta 版（2017/11/4，版本0.7）。官網(wǎng)

(并不是學(xué)會(huì)，就是這么耿直 _(:з)∠)_，手是誰(shuí)？？？)

使用的是：karma + mocha + chai + sinon（如果之前沒(méi)了解過(guò)這幾個(gè)，可以邊寫(xiě)邊看文檔，這樣學(xué)會(huì)快很多）

完整的例子可以在這里找到：GitHub 項(xiàng)目
建議把項(xiàng)目 clone 下來(lái)自己跑一遍，然后可以自己加一些特效（啊，不對(duì)，是代碼才對(duì)。。。

詳細(xì)代碼，及配置見(jiàn) 源碼

it("test dom", () => {
  const div = document.getElementById("test")

  const content = div.innerHTML
  content.should.be.equal("here")

  setDivContent()
  const after = div.innerHTML
  after.should.be.equal("hallo world")
})

it("test async", done => {
  getTopics()
    .then(res => {
      res.success.should.be.equal(true)
      done()
    })
    .catch(err => {
      info(err)
      done(err)
    })

})

當(dāng)你的單元測(cè)試越寫(xiě)越多時(shí)，想測(cè)試新寫(xiě)的單測(cè)是否正確時(shí)，可以用 mocha 的 only
這樣做的好處有二：第一屏蔽其他測(cè)試可以使測(cè)試速度變得更快，第二屏蔽其他測(cè)試，可以在你新寫(xiě)的測(cè)試錯(cuò)誤時(shí)
確定這個(gè)錯(cuò)誤不是被其他測(cè)試所影響導(dǎo)致的。

用法

describe.only("something", function() {
  // 只會(huì)跑包在里面的測(cè)試
})

或者

it.only("do do", () => {
  // 只會(huì)跑這一個(gè)測(cè)試
})

要開(kāi)啟 debug 的話，先在 karma.conf.js 把 singleRun 改成 false
然后，看圖（懶得打字了 (:з)∠)

生成覆蓋率報(bào)告也是相當(dāng)簡(jiǎn)單，不過(guò)有個(gè)要注意的地方就是
現(xiàn)在前端代碼很多都是經(jīng)過(guò) webpack，babel 編譯的，生成的代碼會(huì)多了很多二外的代碼

要解決這個(gè)問(wèn)題使用babel-plugin-istanbul來(lái)替代karma-coverage就可以了

    preprocessors: {
      "src/**/*.js": ["webpack", "coverage"],
      "test/*.test.js": ["webpack"]
    }

將 karma-coverage 去掉,變成

    preprocessors: {
      "src/**/*.js": ["webpack"],
      "test/*.test.js": ["webpack"]
    }

然后在 webpack 配置添加 istanbul 插件

  use: {
    loader: "babel-loader",
    options: {
      plugins: ["istanbul"]
    }
  }

最后可以生成覆蓋率報(bào)告

另外有很多工具可以對(duì)生成的覆蓋率報(bào)告進(jìn)行進(jìn)一步的分析，比如最常見(jiàn)的
你會(huì)在 Github 上經(jīng)常見(jiàn)到的圖標(biāo)

這個(gè)就是利用報(bào)告里的lcovonly分析生成的

coverageReporter: {
  dir: "test/coverage/",
  reporters: [
    { type: "html", subdir: "report-html" },
    { type: "lcovonly", subdir: ".", file: "report-lcovonly.txt" },  // 這里，你可以重命名 file
    { type: "text-summary", subdir: ".", file: "text-summary.txt" }
  ]
}

測(cè)試時(shí)如果有涉及瀏覽器事件（addEventListener），記得測(cè)試完移除掉，不然會(huì)對(duì)其他的測(cè)試造成影響（afterEach -> removeEventListener）

mocha 里使用箭頭函數(shù)需要注意，因?yàn)榧^函數(shù)的 this 指向是靜態(tài)的，所以 this 并不指向 mocha（沒(méi)有 mocha 上下文）

上面有說(shuō)到，如果測(cè)試的是經(jīng)過(guò)編譯的代碼，需要進(jìn)行一些配置，目前的辦法是用babel-plugin-istanbul代替karma-cover來(lái)檢測(cè)覆蓋率

前面有說(shuō)到，為什么不用 should.js？？
因?yàn)槿绻阌?ES6 的語(yǔ)法寫(xiě)單測(cè)（webpack 編譯），用 import should-sinon 會(huì)報(bào)錯(cuò)。。
（是不是因?yàn)?tj 大神寫(xiě)完?yáng)|西不喜歡維護(hù)的習(xí)慣導(dǎo)致should.js支持性不好？？？）