系統(tǒng)：WIN 10

開發(fā)工具：WebStorm

? ? 聽大佬說前端現(xiàn)在也要注重代碼測(cè)試，所以在各種說服自己要積極向上的背景下，決定將新接的項(xiàng)目加入測(cè)試模塊 Mocha 。同時(shí)入手代碼覆蓋率工具Istanbul。我們的目標(biāo)有兩個(gè)：1.? Mocha + Istanbul 測(cè)試公用方法；2.??Mocha + Istanbul + express 測(cè)試路由。

一、Mocha + Istanbul 測(cè)試公用方法

上圖：

????先看項(xiàng)目結(jié)構(gòu)：由于我們公司的習(xí)慣吧，我們的項(xiàng)目現(xiàn)在都是前后端分離的了，但是前端會(huì)引入一個(gè) server 服務(wù)層，我準(zhǔn)備將單元測(cè)試主要放在我們的 server 端。

項(xiàng)目結(jié)構(gòu)

首先，Mocha 走起來：

僅有mocha

然后，代碼覆蓋率demo走起來：

很好，coverage目錄有了

然后，就是 Istanbul 結(jié)合 Mocha 啦：

emmm ？？？

換個(gè)方式試試？？emmm? 好像也不對(duì)

emmmm? 在我百思不得其解以及滿天找原因的時(shí)候，在阮老師的blog評(píng)論區(qū)找到了答案：

對(duì)，就是這個(gè)，感謝大佬分享一波

get? ?-P

二、 Mocha + Istanbul + express 測(cè)試路由

繼續(xù)來看目錄結(jié)構(gòu)2333：

先要說一波 supertest 和 superagent 。他們的 API 是一模一樣的。superagent 是用來抓取頁面用的，而 supertest，是專門用來配合 express （準(zhǔn)確來說是所有兼容 connect 的 web 框架）進(jìn)行集成測(cè)試的。

先來看 app.js ：

再來測(cè)試代碼：

噢噢，重要的一個(gè)，package.json 還沒列出來，這個(gè)很重要：

跑起來

emmm? 有沒有發(fā)現(xiàn)控制臺(tái)打印出來的東西不太對(duì)，沒有代碼覆蓋率的統(tǒng)計(jì)，此時(shí)的coverage也有點(diǎn)不太對(duì)頭。

在大佬的幫助下，發(fā)現(xiàn)原來是沒有關(guān) app ，加個(gè) after 鉤子：

after(function () {

? ? app.close();

});

出現(xiàn)這個(gè)感覺應(yīng)該快成功了，畢竟 coverage 目錄的代碼覆蓋率都已經(jīng)出來了2333，莫名覺得安慰

????這個(gè)時(shí)候，就去看看端口有沒有被占用啦，我之前只看任務(wù)管理器，把 node.js 服務(wù)都關(guān)掉，但是有時(shí)候還是沒太多用，以至于對(duì)自己產(chǎn)生了深深的懷疑。

參考一波：（ windows 下）

netstat -ano | findstr 3030

tasklist | findstr 3030

taskkill -PID <進(jìn)程號(hào)> -F