React 單元測試 前端測試入門實作

me
林彥成
2017-06-21 | 3 min.
文章目錄
  1. 1. 什麼是單元測試
  2. 2. 前端單元測試常見問題
    1. 2.1. 單元測試該怎麼撰寫
    2. 2.2. 什麼是 Jest
    3. 2.3. 什麼是 enzyme?
  3. 3. 單元測試要測試哪些東西?
  4. 4. Redux 測試

什麼是單元測試

當前端開發元件化以後,要測試的話最基本的就是針對元件做單元測試,單元測試通常是一個自動化的測試,確保某一段程式碼 (單元) 有被正式執行,在測試時大多使用單元測試框架測試。

  • 會呼叫被測試單元的入口點
  • 檢查其中一個出口點,所以唯一出口較好測試

依照使用的框架或函式庫不同會有不同的測試工具,像 react 的話 facebook 官方就有 Jest,對於單元測試來說非常方便而且也包含了覆蓋率的計算,最後會直接出一個報表給你,文章中也有推薦 enzyme,是 airbnb 開發的工具,據 react 官方說法是讓測試更簡單。

測試是為了開發速度和產品品質,不要因為著急而跳過測試,沒有測試的話會花更多時間在上線前的來回,可能有些問題還沒修好就上線,引發更多新問題,但什麼都要測試嗎?

  • 追求 “測到關鍵邏輯”,關鍵的測試有測到更重要
  • 測試是為了速度與品質
  • 不好的 “快” 不是 “真的快”
  • 寫測試的時候應避免重複寫原來的程式邏輯

測試的步驟上大致會遵守 3A 原則

  1. Arrange: 準備物件、建立物件、物件設定 (fixture)
  2. Act: 操作物件
  3. Assert: 驗證結果符合預期

好的單元測試

  • 執行夠快
  • 會得到相同結果
  • 跟其他測試完全獨立
  • 理論上不需要 DB、網路
    • 用 Mock Server 或是 Mock Object 模擬外部傳回資料

前端單元測試常見問題

第一次寫測試的話會遇到的問題像是:

  • 單元測試該怎麼撰寫
  • Jest 的腳色是什麼?
  • 什麼是 enzyme?
  • 什麼是 shallow & mount ?

學習上建議是直接閱讀官方文件

https://create-react-app.dev/docs/running-tests

  1. 設定環境
  2. 找相關關鍵字 Jest、enzyme
  3. 理解相關指令像 npm test -- --coverage

單元測試該怎麼撰寫

寫法上會用到以下三個基本關鍵字 describe , it , expect,這是撰寫單元測試的語法架構,寫完這三項就是基本的測試了。

  • describe: 主要是拿來整理 it 用(在這邊又可以用 test 代替),相關的 it 就可以包在 describe 裡面作更進一步的分類整理。
  • it: 是最小的測試單位,所以每一項測試都要寫在某個 it function 裡。it 第一個參數是測試名稱,其實就是給你註解到底這個測試要幹嘛,然後搭配 before、beforeEach、after、afterEach 做進階操作
  • expect: 按照名字來看就是你預期他到底怎樣,搭配 it 這個測試項目,看跑出來的結果是不是跟 expect 中的一樣,這就是基本的測試了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import sum from "./sum";

describe("測試群組一", () => {
it("sums numbers", () => {
expect(sum(1, 2)).toEqual(3);
expect(sum(2, 2)).toEqual(4);
});

it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
});
});

什麼是 Jest

Jest 是主要的測試工具,只要該放的位置該發樓的命名規則都做好,指令打下去就會跑測試了。

什麼是 enzyme?

enzyme 只是讓我們更方便測試 react 用的外掛,主要是因為 react 有用到 virtual dom ,那測試又會需要去 render,所以 enzyme 就封裝了 react 原生的測試讓寫法更直覺。

元件測試,從關鍵字去找相關教學
jquery: element -> $(element) 可以使用 function
enzyme: component -> enzymeComponet 可以使用 function

  • shallow: 只 render 第一層
  • mount: full render,包含元件週期
  • render
  • simulate: 模擬 event
  • setProps: 設定 props
  • setState: 設定 state
  • prop(key): retrieves prop value corresponding to the provided key
  • state(key): retrieves state corresponding to the provided key

單元測試要測試哪些東西?

  • 元件測試,import 後用 mount 然後 props 用假資料進行測試,模擬點擊 jest.fn()
  • function 測試,import 後用假資料測試
  • 非同步: jest.fn()
  • test fixture: 測試的時候特意準備的東西,讓測試可以順利跑完所需要,有些人會叫做 test context
  • 包含測試
  • 出口測試
    • CUT: Code under test
    • SUT: system under test

Redux 測試

Container 在 mount 時需要加入 mock store 以及有使用到的 middleware

1
2
3
4
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
const middlewares = [thunk];
const mockStore = configureStore(middlewares);

喜歡這篇文章,請幫忙拍拍手喔 🤣

share