關於那個看起來很難的測試

## 關於那個看起來很難的測試 --- ## 前端測試是什麼？其實在前端的測試可以分成三個種類： E2E Testing、Integration Testing、Unit Testing ![](https://martinfowler.com/bliki/images/testPyramid/test-pyramid.png =60%x) 圖片來源：[TestPyramid 測試金字塔](https://martinfowler.com/bliki/TestPyramid.html) --- #### 避免成為冰淇淋甜筒 ![](https://pic.pimg.tw/kojenchieh/1546345783-4139256070.png =60%x) 圖片來源：[讓我們聊聊測試自動化金字塔](https://kojenchieh.pixnet.net/blog/post/466703174-%E8%AE%93%E6%88%91%E5%80%91%E8%81%8A%E8%81%8A%E6%B8%AC%E8%A9%A6%E8%87%AA%E5%8B%95%E5%8C%96%E9%87%91%E5%AD%97%E5%A1%94) --- ## Unit Testing 單元測試，擁有以下特點： 1. 單點突破很強，最小的測試單位可以是一個 function 2. 會隔離真實環境，對某部分的功能做測試 3. 測試的範圍較小，容易發現錯誤 4. 測試速度最快，維護成本最低 5. 任何時候都可以導入測試，甚至是在寫程式之前 --- ## 但為什麼我們要寫測試？ - 不曉得程式在哪一次修改後會出現錯誤 - 更容易為程式做重構 - 節省時間，不需要手動點擊 UI --- ### 做測試的原因可能有很多 ## 但目的都與讓程式變得更好有關 --- ## 和手動測試有什麼不同？ - 每一次的手動測試都是一次性的花費，你需要一直做相同的事情。 - 自動化測試是一項投資，隨著時間越久，報酬率就越高。 --- ## 接下來 ## 開始單元測試吧！ --- ## 但是該怎麼開始？在測試之前... 先來了解他的原理！ --- #### 看看下方的 function ```javascript= const sum = (a, b) => a + b; const value = sum(1, 3); // 希望 value 是 4，是或不是都顯示對應的提示 ``` #### 用 if 判斷吧！ ```javascript= if (value === 4) { console.log('正確！'); } else { console.log('錯誤！'); } ```  --- #### 那些測試框架就只是把判斷包裝起來 ```javascript= const expect = (actual, expected) => { if (actual === expected) { console.log('正確！'); } else { console.log('錯誤！'); } } expect(sum(1, 3), 4); ``` --- # 但是還不夠！ ### 如果要判斷 NaN 怎麼辦？ ```javascript= console.log(NaN === NaN); // 比較起來會是 false ```  --- ### 為了要因應各種狀況的驗證 ## 所以我們不能只有一種判斷方法 --- ### 將判斷相等的邏輯放到一個物件中 ```javascript= const expect = (actual) => ({ toBe: (expected) => { if (actual === expected) { console.log('正確！'); } else { console.log('錯誤！'); } }, }); ``` --- ### 在該物件內加入判斷 NaN 的方法 ```javascript= const expect = (actual) => ({ toBe: (expected) => { /* do smoething */ }, toBeNaN: () => { if (isNaN(actual)) { console.log('正確！'); } else { console.log('錯誤！'); } }, }); ``` --- #### 經過修改後測試會變成... ```javascript= const expect = (actual) => ({ toBe: (expected) => { /* do something */ }, toBeNaN: () => { /* do something */ }, }); /* expect 會回傳斷言庫，因此可以直接使用斷言庫內的 method */ expect(sum(1, 3)).toBe(4); // 正確！ expect(sum(1, 3)).toBe(5); // 錯誤！ expect(NaN).toBeNaN(); // 正確！ ``` --- ## 但還是不夠啊！ ### 斷言的方式還有其他... - 非同步執行 - 拋出錯誤 - 判斷 Undefined - 判斷 Truthy、Falsy - 判斷 Object、Array ### 全都要自己做嗎？ --- ## 不需要！ ### 現在的你和剛才不同了！ ### 因為你已經知道測試框架背後做了什麼 --- ### 進入測試框架 ### 開始使用 Jest！ ![](https://i.imgur.com/aTvA81i.png =70%x) 圖片來源：[Jest 官方網站](https://jestjs.io/) --- #### Jest 的測試怎麼寫？ ```javascript= test('用 1 與 3 執行 sum 會回傳 4', () => { const expected = 4; const actual = sum(1, 3); expect(actual).toBe(expected); }); ```  ### 除了 test 之外 ### 是不是一切都變得簡單了？ --- ### 一個測試案例會有哪些部分？ - 好的命名，必須能夠具體知道測試的內容 - 測試目標？ - 做了什麼？ - 期望什麼？ - 好的內容，遵循 3A 原則 - Arrange 準備 - Act 執行 - Assert 驗證 --- #### 看回剛剛的測試案例 ```javascript= // 測試了 sum 並用 1 與 3 執行，最後回傳了 4 test('用 1 與 3 執行 sum 會回傳 4', () => { // Arrange：準備好期望的結果值 const expected = 4; // Act：用 1 和 3 執行 sum const actual = sum(1, 3); // Assert：斷言階段 expect(actual).toBe(expected); }); ``` ### 他現在甚至可以成為 sum 的操作手冊！ --- #### 再做更多吧！ ### 假設現在有個類別... ```javascript= class TodoList { constructor() { this.todoList = []; } getList() { return this.todoList; } addTodo(todo) { this.todoList.push(todo); } } ```  --- ### 就可以這樣子做 ```javascript= test('使用 TodoList 的 addTodo 加入的事項，可以從 getList 中取出', () => { // Arrange const todo = new TodoList(); const expected = ['first']; // Act todo.addTodo('first'); // Assert expect(todo.getList()).toEqual(expected) }) ``` --- ### 加入 UI 呢？ #### 看看這裡 👇 [Unit Test | 香草 JS 的單元測試 feat. @testing-library/dom](https://medium.com/starbugs/unit-test-%E9%A6%99%E8%8D%89-js-%E7%9A%84%E5%96%AE%E5%85%83%E6%B8%AC%E8%A9%A6-feat-testing-library-dom-f8539137bec9) --- # 謝謝大家！ --- 參考文章： - [Frontend Testing Vs. Backend Testing: What's the Difference?](https://www.guru99.com/frontend-testing-vs-backend-testing.html) - [Introduction to Front-End unit testing](https://dev.to/christopherkade/introduction-to-front-end-unit-testing-510n) - [What should we test (ReactJS Components)](https://hackernoon.com/what-should-we-test-reactjs-components-647ded674928) - [Challenging the Testing Pyramid](https://juristr.com/blog/2019/07/testing-cypress-intro/) - [JavaScript 單元測試導引 — 進入 Jest 測試前，先嘗試自己 Build 一個吧](https://medium.com/@leo36094/%E5%9F%BA%E7%A4%8E-javascript-%E8%87%AA%E5%8B%95%E5%8C%96%E6%B8%AC%E8%A9%A6%E5%B0%8E%E5%BC%95-b00729418668) ---