安裝
首先安裝 mocha (官網)和 chai (官網)
npm install mocha chai --save-dev
chai 是一種斷言庫(Assertion Library)，mocha 不像是jest已經內建，可以自行決定要使用哪一種套件，chai是其中最常見的一種。
在package.json加入測試指令
"scripts": {
"test": "npx mocha"
}
設定 Babel
安裝 Babel，再來的說明都會直接使用es6的語法，如果不需要，可以略過這部分。
npm install @babel/core @babel/preset-env @babel/register --save-dev
接著在根目錄新增 babel.config.js
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
],
};
接著在根目錄新增 .mocharc.js，spec是設定 mocha 執行測試的檔案，預設為 test/ ，這裡設定成自動讀取 src/test/ 底下所有以 spec.js 為結尾的檔案。
require可以接陣列設定所需的 module
// .mocharc.js
module.exports = {
spec: ['src/test/*.spec.js'],
require: ['@babel/register'],
};
.mocharc.js 是 mocha 執行時會自動讀取的設定檔，也支援json 或 yaml(說明)，可以選擇喜歡的格式新增，設定檔的內容可以參考：https://github.com/mochajs/mocha/tree/master/example/config
設定參考資料：
https://github.com/mochajs/mocha-examples/tree/master/packages/babel
建立測試
新增一個簡單的測試
// src/test/array.spec.js
import chai from 'chai';
describe('Array', () => {
describe('#indexOf()', () => {
it('should return -1 when the value is not present', function() {
chai.assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});
馬上執行試試看
npm run test
應該會看到下面的資訊，
> vue3-webpack5-template@1.0.0 test
> npx mocha
Array
#indexOf()
✔ should return -1 when the value is not present
1 passing (8ms)
完成第一個測試囉！
支援 async/await
請安裝套件
npm install @babel/plugin-transform-runtime --save-dev
把套件加到 babel.config.js的 plugin 設定
module.exports = {
require: ['@babel/register'],
plugins: ['@babel/plugin-transform-runtime'],
};
Root Hooks
mocha 提供的 hook 包含 before(), after(), beforeEach(), and afterEach()，從語意應該不難看出用途，前兩個只會執行一次，後兩個則是每項測試都會執行。
若要在所有的測試上加上 Hook，則是有這四種 beforeAll(), afterAll(), beforeEach(), and afterEach()，執行時機不變，請根據情境加上執行內容：
// src/test/hooks.js
export const mochaHooks = {
beforeEach: () => {
// do something before every test
}
};
接著在 .mocharc.js 加上設定
module.exports = {
spec: ['src/test/*.spec.js'],
require: [
'@babel/register',
'src/test/hooks.js',
],
};
https://mochajs.org/#hooks
https://mochajs.org/#defining-a-root-hook-plugin
測試結果
mocha 是個可愛的名稱，測試結果也可以換成很多有趣的模式：
npx mocha --report landing
https://mochajs.org/#reporters
支援瀏覽器介面
加上指定的路徑執行下面的指令
npx mocha init [PATH]
- index.html
- mocha.css
- mocha.js
- test.spec.js
目錄底下會多了上述這些檔案，此時只要將 test.spec.js 加入你的測試，再重新整理 index.html，就能看到測試結果已經輸出在畫面上。
可以將 chai 加入 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="mocha.css" />
<script src="https://unpkg.com/chai/chai.js"></script>
</head>
<body>
<div id="mocha"></div>
<script src="mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="tests.spec.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
再來可以直接將前面新增的 src/test/array.spec.js 內容貼過去，index.html 已經載入 mocha 和 chai ，記得把第一行的 import 拿掉。
