學習目標：安裝 Jest 進行簡單的 Unit test 測試
關於此篇學習筆記，主要源自於以下學習資源：
一般的公司主要是以人工測試為主，其原因有以下：
- 公司尚未導入自動化測試，導入一項新技術需要成本。
- 公司有自動化導入測試，但專案很小，不需要寫自動化測試。
- 是大型專案，但寫測試費時，還不如多做幾個需求。
- 測試在對頁面功能時，就會逐一進行操作，因此不需要寫測試。
如果公司的主產品並不是放在工程開發端，又或著專案的功能並不複雜，這些都是合理的。
之前在做網頁設計時需要協助進行測試，都要測上一整天回報 bug 真的非常的辛苦。因此希望自己成為工程師後，在交付專案前能保證功能有基本的品質。
藉由此次的學習整理了解自動化測試的基本觀念，往後在實作上能快速上手。
最一般的測試方式 console.log
依靠 log 來進行除錯，但這樣會使測試檔跟主程式混在一起，在進行大型專案時檔案就會多了許多不必要的代碼。
自動化測試
為了在人工測試前先進行初步的除錯，發展出了自動化測試。
前端常見的自動化測試有兩大類別，此篇主要是講解「Unit Test」，以下為簡單的類別說明：
Unit Test
單元測試，是以單一個行為進行測試，通常專案中最小的單位就是 funciton ，因此就是驗證 funciton 運行是否符合結果。
E2E Test
直接模擬 User 在 Browser 的行為做測試。
測試框架Jest
Jest 是前端測試框架（Test runner）的一種，會使用是因為它與 React 的整合度較佳（同為 Facebook 開發）。其他框架例如：Jasmine(茉莉花), Mocha(摩卡咖啡), AVA。
操作環境
macOS 10.15.3
前置環境
安裝 node.js 及 npm。 ＃可參考：[第二週]不再與 Node.js、npm 擦肩而過
安裝 Jest
透過 npm 安裝 Jest 測試框架到專案環境中
npm install -save-dev jest在 package.json 設定測試指令
打開 package.json 會看到 devDependencies 已經增加了 jest 代表已經安裝成功，找到 scripts 中的 test 將預設值直接改成 jest
代表當我們下 $ npm run test 指令時，就會運行 Jest。
[補充說明] npm script可以自訂義指令，最常見的用法是當我們要 RUN 專案，在其他人接手後不知道哪一隻才是主程式檔（例如：index.js、main.js、app.js），這時候就可以把運行主程式這個動作寫在 scrirpt 中。範例："script": { "test": "jest" "start": "node index.js" // 執行 npm run start 指令時，就會運行主程式檔。}
利用 Jest 來寫你的第一個測試
以下參考卡斯伯 — 十分鐘上手前端單元測試 — 使用 Jest
一般測試會有以下的流程：
- 欲測試的過程：已撰寫好的函式
- 情境說明：用文字表述運作的方式
- 測試的過程：依據情境說明 撰寫測試
- 執行測試：依據情境說明 實際運行函式
- 測試的結果：實際運行結果
建立測試檔
在一開始的時候有提到 console.log 是將測試檔跟主程式混在一起，而 Jest 在執行測試時會尋找副檔名為 .test.js 來進行。
建立測試檔，副檔名為 .test.js
| — index.js //主程式檔| — index.test.js //測試檔
主程式檔增加輸出指令 export
- 將程式輸出成一個 module 供測試用 #[第三週] Node.js 基礎 — module.exports 和 require
//欲測試的函式function sum(a, b) { return a + b;}
//輸出函式module.exports = sum
引入 module
打開 index.test.js ，必須先引入 module： const = require('./index')
測試相關函式說明
describe()
- 說明單元測試，類似群組的概念，將多個 test 包在一起，讓程式看起來更有結構性。
- 寫法：
describe('測試說明', function(){ test… }) - 舉例：
describe('測試 sum function', function(){ test… })test()
- 定義一個單元測試
- 寫法：
test('測試說明', function( ){ expect(測試的函式).toBe(預期要回傳的東西)})
- 舉例
test('a=1, b=2 加起來等於 3', function( ){ expect(sum(1,2)).toBe(3)})
執行測試
$ npm run test結果會顯示 Jest 執行了哪些測試檔，還有每個測試（ expect ）內的預期結果（ toBe ）如果符合會輸出 PASS。
我們將結果（ toBe ）換成 5，再進行一次
這就完成了最簡單的測試
先寫測試再寫程式：TDD
全名 Test-driven Development，中文為測試驅動開發，看中文就蠻好懂它的意思了，就是把剛剛我們測試的流程倒過來，先寫好測試再開發程式。這樣有個好處是，當寫完程式時就已經完成測試了。
因為這比較偏向開發流程，我自己也不清楚是否實務上很多都是照此流程，所以打算些放一些資料，等往後有需要時可以回過頭看看：
重點整理
- Jest 是前端測試框架，為 Facebook 開發，主要用途是自動化測試，而自動化測試可分為兩種單元測試跟 E2E 測試，Jest 屬於單元測試。
- 使用 Jest 的步驟
- 安裝 node.js、npm、Jest
- 在
package.json檔設定測試指令 - 將需測試的程式輸出成一個 module，在
.test.js的副檔名引入 module describe()：群組化測試單元，讓程式看起來更有結構性test()：作為一個單元的測試，寫法為以下
test('測試說明', function( ){ expect(測試的函式).toBe(預期要回傳的東西)})
6. 執行測試指令 npm run test
- TDD：中文為測試驅動開發，先寫好測試在進行開發，是一種開發流程。
以上有任何錯誤的地方歡迎指正，感謝。
