如何使用测试库测试嵌套钩子值的useEffect

Question

我有两个自定义挂钩：

• useInTestHook

  我测试的钩子

• useNestedHook

  已测试并返回值

useInTestHook

钩子有逻辑：

export const useInTestHook = () => {
  const [value, setValue] = useState<number>(1);

  const { isActive } = useNestedHook();

  useEffect(() => {
    isActive && value !== 2 && setValue(2);
  }, [isActive]);

  return { value };
}

我正在使用

nextjs

和

testing-library

。想测试一下。

我做了一个模拟导入：

jest.mock("./hooks/useNestedHook", () => ({
  useNestedHook: () => ({
    isActive: false,
  }),
}));

并制作一个间谍来设置该值：

describe("some test", () => {
  let nestedHookValue: NestedHookResult;

  beforeEach(() => {
    nestedHookValue = { isActive: false };
    jest.spyOn(NestedHookModule, "useNestedHook").mockReturnValue(nestedHookValue);
  });

  afterAll(() => {
    jest.resetAllMocks();
  });

  it("useEffect test", () => {
    const renderedHook = renderHook(() => useInTestHook());
    expect(renderedHook.result.current.value).toEqual(1);
    act(() => {
      nestedHookValue.isActive = true;
    });
    expect(renderedHook.result.current.value).toEqual(2);
  });
});

正如您所猜测的，第二个期望不起作用。因为钩子没有随着值更新而重新渲染。我必须如何使用它？

Answer 1

解决了。

1. 为了强制间谍正常工作，钩子的模拟必须起作用

jest.mock("./hooks/useNestedHook", () => ({
  useNestedHook: jest.fn(),
}));

2. 要激活钩子的

   useEffect

   ，我只想调用重新渲染：

  it("useEffect test", () => {
    const renderedHook = renderHook(() => useInTestHook());
    expect(renderedHook.result.current.value).toEqual(1);
    nestedHookValue.isActive = true;
    renderedHook.rerender();
    expect(renderedHook.result.current.value).toEqual(2);
  });