Photo on jestjs.io

前言

在前幾篇的文章內容中，介紹過兩個自動化測試框架的主題
分別是 Robot Framework 與 Nightwatch.js

而這個禮拜所要介紹的最後一個自動化測試框架
是與 Nightwath 一樣使用 JavaScript 程式語言撰寫測試腳本的 Jest

有興趣的大哥大姐，可以點下方連結參考參考～

鼠年全馬鐵人挑戰 WEEK 13：Robot Framework (上)
鼠年全馬鐵人挑戰 WEEK 14：Robot Framework (下)
鼠年全馬鐵人挑戰 WEEK 15：Nightwatch.js (上)
鼠年全馬鐵人挑戰 WEEK 16：Nightwatch.js (下)

介紹 Jest

Jest 適用於各種 JavaScript 框架
包括 Babel、TypeScript、Node、React、Angular、Vue 等。

Jest 在使用上非常的快速簡單好上手，不用過多的設定操作即可使用。
透過指令還可以在測試執行完，清楚顯示測試的成功覆蓋率。

安裝 Jest

安裝 JavaScript 框架

小弟在這邊就一樣選擇 Node 來做 Jest 的 JavaScript 框架。

如果不確定是否已經安裝可以透過查詢版本來確認
$ node -v 和 $ npm -v
如果尚未安裝 Node.js 和 npm 可點選下面連結安裝
官方載點 >>> nodejs.org

安裝 Jest

為了方便使用小弟就先建立一個 jest 的專案資料夾
$ mkdir jest && cd jest

接著透過 npm 來新增一個 package.json 的初始文件
$ npm init -y

確認 package.json 建立成功後
就可以下指令來安裝 jest 了
$ npm install --save-dev jest

此時在專案底下會增加 node_modules 和 package-lock.json 的資料夾與檔案

執行測試

為了確定 Jest 可以正常運作
小弟就先寫一個簡單的測試來試跑看看

首先，創建一個 sum.js 的 module 文件

module.exports = function (a, b) {
  return a + b;
}

然後，創建一個名為 sum.test.js 的測試文件。

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

接著，將執行指令添加到 package.json 文件中

{
  "scripts": {
    "test": "jest"
  }
}

最後，執行 $ npm run test
Jest將顯示以下消息

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

結尾

這週的內容簡單的設定一下 Jest。
先做好簡單的初始作業，並執行簡單的測試。
如果有疑問或是有錯誤，還請各位大哥大姐提點。
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ

參考文件:

Jest · ? Delightful JavaScript Testing