Mocha瀏覽器測試入門教程
摘要： 如何使用Mocha在瀏覽器中測試JavaScript程式碼？
在玩轉Node.js單元測試部落格中，我介紹了測試框架Mocha，對後端Node.js程式碼進行測試。在這篇部落格，我將介紹如何使用Mocha在瀏覽器中測試JavaScript程式碼。
mocha init：初始化測試程式碼
安裝mocha(在國內使用cnpm比npm更快):
sudo cnpm install -g mocha |
執行mocha init命令，可以自動生成瀏覽器端的測試檔案：
mocha init test |
mocha會自動建立一個test目錄，其中有4個檔案，分別是：
- mocha.js：Mocha原始碼
- mocha.css：Mocha原始碼
- tests.js：測試程式碼
- index.html：瀏覽器測試入口頁面
mocha.js與mocha.css是Mocha模組自身的原始碼，因為需要在瀏覽器中展示測試結果，因此需要Mocha的CSS檔案；tests.js為測試程式碼，為空檔案，需要我們編寫；index.html為執行測試的入門頁面，使用瀏覽器大概它就會執行測試，並且展示測試結果。
index.html是理解Mocha瀏覽器測試的關鍵：
可知：
- index.html中匯入了mocha.js, mocha.css和tests.js檔案；
- id為mocha的div是空的，測試結果的元素會插入到這個div；
- mocha.setup(‘bdd’)指定使用Mocha的BDD介面，mocha.run()表示執行測試，測試程式碼tests.js必須放在兩者之間，否則不會執行測試；
執行測試案例
add.js
使用mocha init生成的測試程式碼中沒有實際的測試案例，不妨新增一個簡單的add.js：
function add(a, b) |
可知，add是一個非常簡單的加法函式。
tests.js
在tests.js新增針對add函式的測試程式碼：
var should = chai.should(); |
在測試程式碼中，我使用了斷言庫Chai。
index.html
在index.html中，需要新增原始碼add.js以及斷言庫chai.js：
<!DOCTYPE html> |
執行測試
使用瀏覽器開啟index.html，就會執行測試，並且看到執行結果：
可知，測試通過:)
mocha-phantomjs：使用命令列測試
對於習慣在終端敲命令列的程式設計師來說，用瀏覽器開啟index.html去進行測試顯得非常不合時宜。
還好，有所謂的headless的瀏覽器PhantomJS，它沒有圖形介面，卻可以執行前端程式碼，方便用來測試。
mocha-phantomjs命令
安裝phantomjs和mocha-phantomjs(phantomjs模組更名為phantomjs-prebuilt)：
sudo cnpm install -g phantomjs-prebuilt mocha-phantomjs |
將Mocha和PhontomJS結合起來的是mocha-phantomjs，在終端執行mocha-phantomjs命令，它會在PhantomJS中執行Mocha測試程式碼，並將結果展示在終端，非常方便：
mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html |
–path選項指定了phantomjs的安裝路徑。這個必須指定，否則會報錯”phantomjs terminated with signal SIGSEGV”。
另外，測試程式碼tests.js中必須有describe語句，否則使用mocha-phantomjs執行時會報錯”mocha.run() was called with no tests”。
npm test命令
mocha-phantomjs的測試命令比較長，可以在package.json中配置npm的test指令碼：
"scripts": { |
這樣，執行npm test命令就可以執行測試。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了8億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
您的使用者遇到BUG了嗎？
體驗Demo 免費使用