Mocha瀏覽器測試入門教程

Fundebug發表於2018-05-24
瀏覽器

摘要： 如何使用Mocha在瀏覽器中測試JavaScript程式碼？

本文所有程式碼都在Fundebug/mocha-browser-test倉庫中。

Mocha瀏覽器測試入門教程

在玩轉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瀏覽器測試的關鍵：

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>
複製程式碼

可知：

  • 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)
{
    return a + b;
}
複製程式碼

可知，add是一個非常簡單的加法函式。

tests.js

在tests.js新增針對add函式的測試程式碼：

var should = chai.should();

describe("測試add函式", function()
{
	it("1加1等於2", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });

    it("1加2等於3", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });
});
複製程式碼

在測試程式碼中，我使用了斷言庫Chai。

index.html

在index.html中，需要新增原始碼add.js以及斷言庫chai.js：

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="https://cdn.staticfile.org/chai/4.0.0-canary.1/chai.js"></script>
    <script src="../add.js"></script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>

  </body>
</html>
複製程式碼

執行測試

使用瀏覽器開啟index.html，就會執行測試，並且看到執行結果：

Mocha瀏覽器測試入門教程

可知，測試通過:)

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


  測試add函式
    ✓ 1加1等於2
    ✓ 1加2等於3


  2 passing (7ms)
複製程式碼

--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": {
    "test": "mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html"
  },
複製程式碼

這樣，執行npm test命令就可以執行測試。

相關文章