使用 Jest 對 Redux 做單元測試 - Reducer 篇

使用 Jest 對 Redux 的 reducer 做單元測試的簡單記錄。


由於 reducer 是一個 pure function,也就是說,只要 input 相同,即可得到相同的 output。因此,在做測試時,只要比對 output 是否等於預期結果即可。

範例如下,listData 是一個 reducer,對其指定要執行的 action type 和丟入要處理的資料 payload。在此引入兩個檔案 test_data 作為 input,expected_data 作為 output 的比對目標,接著將 test_data 輸出結果與 input,expected_data 做比較即可。

import TEST_DATA from './test_data';
import EXPECTED_DATA from './expected_data';

const initState = {
  isLoading: false,
  listData: [],
  pageIndex: 0,
  pageSize: 25,
  sortColumn: [{ id: 'level', order: 'asc' }],
};

describe('Check list data...', () => {
  // 不傳入任何東西就會得到初始狀態
  test('List data should be equal to initial state if nothing passed.', () => {
    const result = ruleList(undefined, {});
    expect(result).toEqual(initState);
  });

  test('List data should be as expected.', () => {
    const result = listData(initState, {
        type: SET_LIST_DATA,
        payload: TEST_DATA,
    });

    expect(result).toEqual(EXPECTED_DATA);
  });
});

參考資料


使用 Jest 對 Redux 做單元測試 - Action 篇


Jest redux Unit Test 單元測試 自動化測試