如何使用 Mocha 和 Chai 開始測試前端應用程式

警告:本篇文章已經過時,可能無法反映目前的最新技術狀態

Mocha 是一個強大且多功能的測試工具。市面上有很多測試框架,而我選擇 Mocha 是因為它的流行程度和易用性。

讓我們首先看看如何在瀏覽器中運行測試。下載以下文件:


將相應的 mocha.js、chai.js、chai-jquery.js 文件放在您網站的 test/ 子文件夾中。

選擇您的 index.html 文件並載入它們,然後我們將設置 Mocha 使用 BDD 測試風格,並載入一個名為 test.web.js 的文件,該文件將承載我們的測試規則。

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
 mocha.setup('bdd');
 expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

在您的 body 中,放置一個 div#mocha:

<div id="mocha"></div>

test/test.web.js 文件是整個遊戲的核心,它將承載測試規則。

describe('Array', function(){
 describe('#indexOf()', function(){
 it('should return -1 when the value is not present', function(){
 [1,2,3].indexOf(5).should.equal(-1);
 [1,2,3].indexOf(0).should.equal(-1);
 })
 })
})

describe('After this', function() {
 it('should be logged in', function(done) {
 expect($('#the-main-div')).to.exist;
 done();
 });
});

現在可以在瀏覽器中運行這些測試,在瀏覽器的控制台中輸入 mocha.run() 即可。

這很棒,因為在測試運行時,您可以觀察屏幕變化並讀取控制台消息。

使用 PhantomJS(無界面的 WebKit 實現),您可以在終端中運行測試。缺點是 PhantomJS 不是真正執行代碼的環境,但它更適合自動檢測問題。

如何實現呢?下載並安裝 PhantomJS。使用全局 npm 安裝 Mocha:npm install -g mocha。下載這個包 https://github.com/Backbonist/front-tests,並將它放在您的項目目錄中,例如 test/。

然後,您可以通過調用 phantomjs run-mocha.js http://test-site.com 來運行測試。

這種方法的問題是,您無法在真實的環境中以程序方式執行測試。當還在構建原型和開發之前,尚未向公眾開放時,這實際上不是一個問題,但在生產環境中,您不想每次想要測試時都從瀏覽器運行測試套件。每個瀏覽器都要測試一次吧?

Testem 就是為此而生的。它只是一個測試運行器,與測試框架無關,因此它可以運行 Mocha、Jasmine、QUnit 或您使用的任何測試框架。

  1. $ npm install testem -g
  2. 進入您應用程式的測試目錄,輸入 $ testem
  3. 打開瀏覽器,訪問指定的位置以運行測試。

您可以選擇在任何瀏覽器上運行測試,只需啟動它們,或者通過運行

$ testem -l Chrome,Safari

告訴 testem 為您運行測試。

您也可以在 CI(持續集成)模式下使用 testem。

$ testem ci

這將自動在指定的瀏覽器上啟動測試並以 TAP 格式輸出,該格式可供人閱讀,並可輸入連續集成伺服器以自動化流程。

瀏覽器測試

您可能會在 Chrome 或 Firefox 上開發您的網站:它們的開發者工具很棒,可以幫助您加快開發過程。

Google Chrome 有不同的版本供您測試您的網站。穩定版和正常版,還有 Chrome Canary。

Canary 是一款可與正常版 Google Chrome 並行運行的瀏覽器。它的優點是您每天都能獲得提交到 Chromium 源代碼的更新,並且在這些功能被送到主要穩定的 Chrome 通道之前,您可以在 11 個星期內獲得對它們的訪問,並且如果需要,可以提交錯誤報告。您甚至可以將它設為您的默認瀏覽器。

Mozilla 也有自己的 Firefox Nightly,可以做與 Chrome Canary 類似的事情:每天更新將送到您的瀏覽器。

您可能希望使用 Chrome 開發通道,以及 Firefox Aurora,它們代表的是比 Canary/Nightly 更穩定的版本。

要測試 Safari,您可以使用 WebKit 夜間版本。當您使用 WebKit 時,實際上是在運行具有更新版本的底層引擎的 Safari。