如何为 createSlice() 的 extraReducers 编写测试（Jest + Enzyme）？答案

【问题标题】：How to write tests ( Jest + Enzyme ) for extraReducers of createSlice ()?如何为 createSlice() 的 extraReducers 编写测试（Jest + Enzyme）？
【发布时间】：2020-10-12 13:55:46
【问题描述】：

我已经开始使用@reduxjs/toolkit 创建我的应用程序，但有点卡住了。我找不到任何资源可以指导我如何对 extraReducers 中的逻辑进行单元测试。任何帮助都将不胜感激。

例子：

const fetchList = createAsyncThunk('example/fetchList', async ({skip, reset, ...rest}) => {
  const request = {
    skip: reset ? initialState.skip : skip,
    ...rest,
  };
  return await getList(request);
});
const exampleSlice = createSlice({
  name: 'example',
  initialState: {id: '', list: []},
  reducers: {
    resetParams() {
      return {id: '', list: []}
    },
    setId(state, {payload}) {
      state.id = payload.id
    }
  },
  extraReducers: {
    [fetchList.pending]: (state) => {
      state.fetching = true;
    },
    [fetchList.fulfilled]: (state, {payload = []}) => {
      return {
        fetching: false,
        id: state.id + 1,
        list: payload
      }
    },
    [fetchList.rejected]: (state, {error}) => {
      state.fetching = false;
    },
  },
});

//测试 .. 为 setId()

const initialState = {
  id: 1,
  list : []
}
const result = exampleSlice.reducer(initialState, exampleSlice.actions.setId({id: 10}))
expect(result.id).toEqual(10)

如何在 extraReducers 中测试 fetchList.fulfilled 和 fetchList.rejected 的逻辑！

【问题讨论】：

标签： reactjs react-redux enzyme redux-thunk redux-toolkit

【解决方案1】：

您可以使用与您展示的相同的方式对其进行测试。

这里有一个简单的方法，可以根据createAsyncThunk 输出的操作类型来测试reducer 的逻辑。

import reducer, {
  fetchList
} from './exampleSlice';

describe('exampleSlice', () => {
  describe('reducers', () => {
    const initialState = { id: '', list: [], fetching: false }
    
    it('sets fetching true when fetchList is pending', () => {
      const action = { type: fetchList.pending.type };
      const state = reducer(initialState, action);
      expect(state).toEqual({ id: '', list: [], fetching: true });
    });

    it('sets the id and list when fetchList is fulfilled', () => {
      const action = { type: fetchList.fulfilled.type, payload: { id: 1, list: [2, 3]} };
      const state = reducer(initialState, action);
      expect(state).toEqual({ id: 1, list: [2, 3], fetching: false });
    });

    it('sets fetching false when fetchList is rejected', () => {
        const action = { type: fetchList.rejected.type, payload: { error: 'some error' } };
        const state = reducer(initialState, action);
        expect(state).toEqual({ id: '', list: [], fetching: false });
      });
  });

});

我还在演示 CSB 上提出了相同概念的一个简单示例：https://codesandbox.io/s/rtk-14-addmatcher-counter-test-l11mt?file=/src/features/counter/counterSlice.test.ts

【讨论】：