如何Mock异步dispatch返回值？Redux Thunk测试遇数据undefined问题

你错误地模拟了fetchSomeData的返回值。因为fetchSomeData本身是一个Redux Thunk函数，它的返回值应该是一个接受dispatch/getState参数的异步函数，而不是直接返回Promise。

你当前用mockResolvedValueOnce让fetchSomeData直接返回了一个Promise，但Redux Thunk的dispatch方法在处理thunk时，会调用thunk返回的函数，而非直接处理Promise。这就导致await dispatch(fetchSomeData())最终拿到undefined——因为dispatch调用的是一个Promise对象（而非函数），无法执行内部逻辑，自然没有返回值。

需要让fetchSomeData的mock返回一个符合Thunk规范的函数，这个函数被dispatch调用时，返回你预设的模拟数据Promise。

修改测试文件中的mock代码：

// 替换原来的 fetchSomeData.mockResolvedValueOnce(...)
fetchSomeData.mockReturnValueOnce(() => Promise.resolve({ value: 'some dummy data' }))

// 或者更贴近真实Thunk的写法（如果原thunk是异步函数）
fetchSomeData.mockReturnValueOnce(async () => ({ value: 'some dummy data' }))

import fetchSomeData from '/path/to/fetchSomeData'
import myAction from '/path/to/myAction'

jest.mock('/path/to/fetchSomeData')

describe('test function', () => {
    beforeEach(() => { jest.clearAllMocks() })

    it('tests the function', async () => {
        const dispatchMock = jest.fn()
        // 修正mock逻辑：让fetchSomeData返回一个Thunk函数
        fetchSomeData.mockReturnValueOnce(() => Promise.resolve({ value: 'some dummy data' }))

        await myAction()(dispatchMock)

        // 如果原fetchSomeData的Thunk内部没有额外dispatch其他action，这里调用次数为1
        expect(dispatchMock).toHaveBeenCalledTimes(1)
        // 还可以验证dispatch调用的参数是fetchSomeData返回的Thunk函数
        expect(dispatchMock).toHaveBeenCalledWith(expect.any(Function))
    })
})

如果你的fetchSomeData Thunk内部还会dispatch其他action（比如请求开始/成功/失败的action），那么dispatchMock的调用次数会大于1，你需要根据真实逻辑调整断言。

内容的提问来源于stack exchange，提问作者noblerare