建立 JavaScript 單元測試環境

6月 08, 2018

建立 JavaScript 單元測試環境

本案例使用 Mocha 單元測試框架替專案進行測試。

GETTING STARTED

安裝 mocha

$ cd 到專案根目錄
$ npm install mocha

建立測試目錄與測試程式

$ mkdir tests          # 建立測試目錄
$ $EDITOR test/test.js # 在測試目錄下，使用你的編輯器建立測試程式 test.js

到目前為止，專案目錄結構如下：

├── index.html
├── node_modules           # node 套件目錄
│   │ 
│   ├── mocha              # mocha 目錄
│   │   ├── bin            # mocha 執行檔目錄
│   │   │   ├── mocha      # mocha 執行檔，我們就是透過這個 mocha 進行單元測試
├── package-lock.json
├── package.json
└── tests                  # 測試目錄，以後所有測試程式統一放在 tests 目錄下
    └── test.js            # 測試程式 test.js

確定測試環境已經建立

進行測試之前，一定要先確定測試環境已經建立完成，所以先隨便寫一個一定會 pass 的測試程式。

編輯 test.js

	var assert = require('assert');

	describe('Array', function() {
	describe('#indexOf()', function() {
	it('should return -1 when the value is not present', function() {

	assert.equal([1,2,3].indexOf(4), -1);
	});
	});
	});

view raw 建立 JavaScript 單元測試環境 - 編輯 test.js hosted with ❤ by GitHub

手動進行第一次測試

啟用 Mocha，第一個參數必須是測試目錄的路徑

$ node_modules/mocha/bin/mocha tests

執行結果：

透過 npm 進行測試

如果覺得每次都要打這麼長的指令才能進行測試，也可以設定 package.json，使用 npm 進行測試。

在 package.json 的 scripts 欄位加入 "test": "mocha --recursive ./tests"。

修改 package.json

{
  "name": "todolist-libs",
  "version": "1.0.0",
  "description": "todolist-libs",
  "main": "index.js",
  "scripts": {
    "test": "mocha --recursive ./tests"   # 加入這行，啟用 mocha 並給予測試目錄的相對路徑。
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mocha": "^5.2.0"
  }
}

這樣就可以直接透過 npm 進行測試了唷！

$ npm test

執行結果：

前端測試環境

雖然 JavaScript 的測試環境有區分前端、後端，但是 Mocha 有提供前端測試環境用的 mocha.js 供大家使用。

__但是__ mocha 並沒有支援前端測試的斷言庫，

所以必須加入 chia 斷言庫套件，才能進行斷言。

npm install chia

建置環境

為了區隔前端與後端的測試程式，在 tests 目錄底下再新增一個 front 目錄。

mkdir tests/front

接下來在 tests/front 建立一個建置測試環境的 html，再依序載入 mocha.js、chai.js、受測物件、測試程式即可。

詳細請看 test_taskStorage.html：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Cow tests</title>
	<link rel="stylesheet" media="all" href="../../node_modules/mocha/mocha.css">
	</head>
	<body>
	<div id="mocha"><p><a href=".">Index</a></p></div>
	<div id="messages"></div>
	<div id="fixtures"></div>
	<script src="../../node_modules/mocha/mocha.js"></script><!-- mocha 前端測試框架 -->
	<script src="../../node_modules/chai/chai.js"></script> <!-- chia 斷言庫 -->
	<script src="../../assets/js/taskStorage.js"></script> <!-- 受測物件 -->
	<script>mocha.setup('bdd')</script>
	<script src="test_taskStorage.js"></script> <!-- 測試程式 -->
	<script>mocha.run();</script>
	</body>
	</html>

view raw 建立 JavaScript 單元測試環境 - 詳細請看 test_taskStorage.html hosted with ❤ by GitHub

測試程式: test_taskStorage.js：

	var assert = chai.assert; // 將 assert 替換成 chai.assert
	describe('taskStorage', function() {
	describe('#create()', function() {
	it('建立一筆「待辦事項」', function() {

	// Arrange 建立測試物件、測試資料
	taskTitle = '學習 JavaScript 單元測試';

	// Act 呼叫測試方法
	taskStorage.create(taskTitle);

	// Assert 驗證結果是否符合預期
	expect = '學習 JavaScript 單元測試';
	newtTask = taskStorage.getNewestTask();
	assert.equal(expect, newtTask.title, '成功建立一筆待辦事項');
	});
	});
	});

view raw 建立 JavaScript 單元測試環境 - 測試程式: test_taskStorage.js hosted with ❤ by GitHub

瀏覽器執行 test_taskStorage.html 測試結果：

建置前端測試環境成功～LOL

測試環境完成後，想取得測試覆蓋率可以參考這篇：JavaScript 前端測試覆蓋率

WadeHuang的學習迷航記