/

前端測試入門

前端測試入門

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

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

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

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

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

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

1
2
3
4
5
6
7
8
<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：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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。