使用带有 getState() 的 mockStore 进行 Thuk 测试

Posted 2023-02-22

【中文标题】使用带有 getState() 的 mockStore 进行 Thuk 测试

【英文标题】：Thunk testing using mockStore with getState()

【发布时间】：2019-03-09 05:30:00

【问题描述】：

我在使用 mock-store 测试 thunk 时遇到问题。

在我的 thunk 中，我调用 getState() 来获取 redux 存储的状态，然后根据状态调度操作。

如何让我的 thunk getState() 调用来检查模拟存储状态而不是 redux 存储状态？

    import initialState from '../configureStore'
    import saveAndSendTask from '../thunks/queueThunk'
    import configureMockStore from 'redux-mock-store'
    import thunk from 'redux-thunk'
    import * as actions from '../actions/index'

    const middlewares = [thunk]
    const mockStore = configureMockStore(middlewares)

    describe('Testing TaskQueue Thunk', () => 
        const store = mockStore(initialState)

        test('Test TaskQueue thunk sends to sever and removes from queue.', () => 
            // removed variables test data for the sake of brevity.

            // Add actions to Mock Store and set up Base state needed to test.
            store.dispatch(actions.addToTaskQueue(task1))
            store.dispatch(actions.addToTaskQueue(task2))
            store.dispatch(actions.setTasks([task1, task2, task3]))
            store.dispatch(actions.selectTask(task3.id))
            store.dispatch(actions.isConnected(true))

            // This is the thunk I want to test.
            store.dispatch(saveAndSendTask())

            expect('something').toEqual('something')
        )
    )

这是我要测试的 thunk。

    export const saveAndSendTask = (): any => 
      return (dispatch: Dispatch, getState) => 

        // This state is the same as initial state of redux store. Ignores Mock store state.
        console.log(getState())

        // Selected task is undefined.
        dispatch(addToTaskQueue(getState().tasks.selectedTask))

        // ....rest of logic.....
      
    

【参考方案1】：

redux-mock-store 不更新状态，只记录传递给调度的动作。

此外，在库中实现getState 方法的代码要么返回传递的初始状态，要么返回一个函数。

getState () 
  return isFunction(getState) ? getState(actions) : getState

根据文档：

请注意，此库旨在测试与动作相关的逻辑，而不是与减速器相关的逻辑。换句话说，它不会更新 Redux 存储。 如果您想要一个将动作和减速器组合在一起的复杂测试， 看看其他库（例如，redux-actions-assertions）。参考 发送#71了解更多详情。

您可以尝试另一个库，遵循 #71 中提到的建议，通过手动将操作传递给您的 reducer 以获取您期望的更新状态，或者修改您的规范以验证在 saveAndSendTask 中调度的操作，使用预期先前的状态来初始化您的 mockStore。