Redux Toolkit：如何使用 uid 测试操作准备回调答案

【问题标题】：Redux Toolkit: How to test actions with uid prepare callbackRedux Toolkit：如何使用 uid 测试操作准备回调
【发布时间】：2020-04-27 07:06:06
【问题描述】：

在 docs 中用于测试递增的待办事项 ID，这假定了可预测的响应。

在下面的示例中，生成了一个唯一的 id。

如何测试？

这个测试通过了，但我不确定它是否正确，不应该根据准备回调中的内容来定义 id 吗？

slice.js

add: {
    reducer: (state, {payload}: PayloadAction<{id: string, item: Item}>) => {
        state[payload.id] = payload.item
    },
    prepare: (item: Item) => ({
        payload: {id: cuid(), item}
    })
}

slice.test.js

it('should handle add', () => {
    expect(
        reducer(
            {},
            {
                type: actions.add,
                payload: {
                    id: 'id-here?',
                    item: {
                        other: 'properties...'
                    }
                },
            }
        )
    ).toEqual({
        'id-here?': {
            other: 'properties...'
        },
    })
})

【问题讨论】：

标签： redux jestjs redux-toolkit

【解决方案1】：

您可以将prepare函数和reducer函数拉出到它自己的常量中，然后单独测试prepare：

todosSlice.js：

[...]

let nextTodoId = 0;
export const addTodoPrepare = (text) => {
    return {
        payload: {
            text,
            id: nextTodoId++
        }
    }
}
export const addTodoReducer = (state,
                               action) => {
    const {id, text} = action.payload;
    state.push({
                   id,
                   text,
                   completed: false
               });
};

const todosSlice = createSlice({
                                   name: 'todos',
                                   initialState: [],
                                   reducers: {
                                       addTodo: {
                                           prepare: addTodoPrepare,
                                           reducer: addTodoReducer,
                                       },
                                   }
                               })

[...]

todosSlice.spec.js：

import todos, {addTodo, addTodoPrepare} from './todosSlice'

describe('addTodoPrepare',
         () => {
             it('should generate incrementing IDs',
                () => {
                    const action1 = addTodoPrepare('a');
                    const action2 = addTodoPrepare('b');

                    expect(action1.payload).toEqual({
                                                        id: 0,
                                                        text: 'a'
                                                    })
                    expect(action2.payload).toEqual({
                                                        id: 1,
                                                        text: 'b'
                                                    })
                })
         })

describe('todos reducer',
         () => {
            [...]
         })

【讨论】：

【解决方案2】：

对于单元测试，否，只需独立测试每个 reducer。

对于集成测试和 e2e 测试，是。

【讨论】：