主页 / coding / 问题 / 78951482
Accepted
MiguelG
Asked: 2024-09-05 14:00:42 +0800 CST

如何使用 redux-toolkit vitest 监视 useAppDispatch() 钩子实例

  • 772

由于我们不能在测试文件中使用钩子 useAppDispatch()，我想知道如何监视返回的实例。

import * as redux from "@/core/context/redux/store";

...

it("test",async ()=>{
    await waitFor(() => {
      wrapper = render(<MockForgeViewer />);
    });
    const spyDispatch = vi.spyOn(redux, "useAppDispatch");
    wrapper?.unmount();
    expect(spyDispatch).toHaveBeenCalledWith();
   
});

我刚刚意识到，此代码正在监视钩子本身，而不是返回值（dispatch）

const dispatch = useAppDispatch();

实际上我希望监视调度，以断言何时调用了特定的reducer。例如：

dispatch(resetStates());
unit-testing

1 个回答

  1. Best Answer
    it("test",async ()=>{
    await waitFor(() => {
      wrapper = render(<MockForgeViewer />);
    });
    const spyDispatch = vi.spyOn(redux, "useAppDispatch");
    wrapper?.unmount();
    expect(spyDispatch).toHaveBeenCalledWith();
   
});

    我刚刚意识到，这段代码正在监视钩子本身，而不是返回值（dispatch）

    您应该创建一个模拟dispatch函数来断言，并由您的useAppDispatch间谍返回。

    例子：

    const mockDispatch = vi.fn();
const spyDispatch = vi.spyOn(redux, "useAppDispatch")
  .mockImplementation(() => mockDispatch);

...

expect(mockDispatch).toHaveBeenCalledWith(resetStates());
    • 1

相关问题