Mocha瀏覽器測試入門教程

時間 2019-11-15

標籤 mocha 瀏覽器測試入門教程欄目瀏覽器简体版

原文原文鏈接

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

本文全部代碼都在Fundebug/mocha-browser-test倉庫中。css

在玩轉Node.js單元測試博客中，我介紹了測試框架Mocha，對後端Node.js代碼進行測試。在這篇博客，我將介紹如何使用Mocha在瀏覽器中測試JavaScript代碼。html

mocha init：初始化測試代碼

安裝mocha(在國內使用cnpm比npm更快):前端

sudo cnpm install -g mocha
複製代碼

執行mocha init命令，能夠自動生成瀏覽器端的測試文件：java

mocha init test
複製代碼

mocha會自動建立一個test目錄，其中有4個文件，分別是：node

mocha.js：Mocha源碼
mocha.css：Mocha源碼
tests.js：測試代碼
index.html：瀏覽器測試入口頁面

mocha.js與mocha.css是Mocha模塊自身的源代碼，由於須要在瀏覽器中展現測試結果，所以須要Mocha的CSS文件；tests.js爲測試代碼，爲空文件，須要咱們編寫；index.html爲運行測試的入門頁面，使用瀏覽器大概它就會運行測試，而且展現測試結果。git

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> 複製代碼

可知：github

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：npm

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-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命令就能夠運行測試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。