Javascript 如何测试thunk是否已传递给dispatch？

我有以下的想法：

export const deleteUser = (id: number) => (dispatch: ThunkDispatch<{}, {}, AnyAction>) =>
    axiosInstance.delete(`users/${id}`)
        .then(() => dispatch(deleted(id)))

现在我正在测试一个按钮，它发出这个声音。我可以复制前面的方法（将调度的操作与预期调度的操作进行比较），但这似乎没有必要，因为我已经测试了thunk。还需要进行更多的测试设置（例如模拟axios）

我需要做的就是测试按钮是否用这个按钮调用

dispatch

。我试过了

beforeEach(() => {
    store = mockStore({ users: userList })
    store.dispatch = jest.fn()
    render(<Provider store={store}><UserTable /></Provider>)
});

it('should dispatch delete thunk when the delete button is clicked', () =>
    fireEvent.click(screen.getByRole('button', {name: /delete user 1/i}))
    expect(store.dispatch).toHaveBeenCalledTimes(1)
    expect(store.dispatch).toHaveBeenCalledWith(deleteUser(1))
})

beforeach（（）=>{
store=mockStore（{users:userList}）
store.dispatch=jest.fn（）
render（）
});
它（'单击删除按钮时应发出删除提示'，（）=>
firevent.click（screen.getByRole（'button'，{name:/delete user 1/i}））
预计（商店.发货）.已被催收时间（1）
expect（store.dispatch）.tohavencalledwith（deleteUser（1））
})

但是

expect（store.dispatch）.toHaveBeenCalledWith（deleteUser（1））

失败，因为您无法比较匿名函数

---

还有其他方法吗，或者我需要“重新测试”组件中的thunk吗？

仔细考虑后，检查thunk是否已发送到此处没有多大意义。我选择了将要测试的组件从连接的组件中分离出来的方法-请参阅。这允许我编写一个测试，如

const mockDeleteUser = jest.fn()
it('should call deleteUser when delete button is clicked', () => {
    render(<UserTable users={userList} deleteUser={mockDeleteUser} />)
    fireEvent.click(screen.getByRole('button', {name: /delete user 1/i}))
    expect(mockDeleteUser).toHaveBeenCalledTimes(1)
    expect(mockDeleteUser).toHaveBeenCalledWith(1)
})

const mockDeleteUser=jest.fn（）
它（'单击删除按钮时应调用deleteUser'，（）=>{
render（）
firevent.click（screen.getByRole（'button'，{name:/delete user 1/i}））
期望（mockDeleteUser）.tohaveBeenCalledTime（1）
期望（mockDeleteUser）.toHaveBeenCalledWith（1）
})

---

i、 e.我没有模拟分派函数并检查

deleteUser

thunk到达的位置，而是模拟

deleteUser

并检查它是否被调用。然后，可以在E2E测试中测试连接的组件。

仔细考虑后，检查此处是否发送了thunk没有多大意义。我选择了将要测试的组件从连接的组件中分离出来的方法-请参阅。这允许我编写一个测试，如

const mockDeleteUser = jest.fn()
it('should call deleteUser when delete button is clicked', () => {
    render(<UserTable users={userList} deleteUser={mockDeleteUser} />)
    fireEvent.click(screen.getByRole('button', {name: /delete user 1/i}))
    expect(mockDeleteUser).toHaveBeenCalledTimes(1)
    expect(mockDeleteUser).toHaveBeenCalledWith(1)
})

const mockDeleteUser=jest.fn（）
它（'单击删除按钮时应调用deleteUser'，（）=>{
render（）
firevent.click（screen.getByRole（'button'，{name:/delete user 1/i}））
期望（mockDeleteUser）.tohaveBeenCalledTime（1）
期望（mockDeleteUser）.toHaveBeenCalledWith（1）
})

---

i、 e.我没有模拟分派函数并检查

deleteUser

thunk到达的位置，而是模拟

deleteUser

并检查它是否被调用。然后可以在E2E测试中测试连接的组件。

几年前的讨论可能与您的问题有关：啊，是的，这不是一个坏主意-测试两个函数的字符串内容：

expect（store.dispatch.mock.calls[0][0].toString（））.toBe（deleteUser（1.toString（））

。不过确实觉得有点不对劲。几年前的讨论可能与您的问题有关：啊，是的，这不是个坏主意-测试两个函数的字符串内容：

expect（store.dispatch.mock.calls[0][0].toString（））.toBe（deleteUser（1.toString（））

。不过我觉得有点不舒服。