测试自定义挂钩的 return 值

Question

我正在尝试为此自定义挂钩编写测试套件。

export const useInitialMount = () => {
  const isFirstRender = useRef(true);

  // in the very first render the ref is true, but we immediately change it to false.
  // so the every renders after will be false.
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return true;
  }
  return false;
};

非常简单returnstrue或false。
如我所见，我应该使用 @testing-library/react-hooks 这是我的尝试：

test("should return true in the very first render and false in the next renders", () => {
  const { result } = renderHook(() => {
    useInitialMount();
  });
  expect(result.current).toBe(true);
});

但我得到了 undefined，这没有意义，它应该是 true 或 false。

PS：代码在项目中按预期工作。

Answer 1

renderHook 调用的语法在您的测试中不太正确。

注意花括号，你应该从 renderHook 回调中 return useInitialMount()，而不是只在里面调用它（因此你得到 undefined）。

test('should return true in the very first render and false in the next renders', () => {
  const { result } = renderHook(() => useInitialMount());
  expect(result.current).toBe(true);
});

编辑： 澄清一下，这里的区别是：

调用 () => { useInitialMount(); }); returns undefined，没有 return 语句，因此默认情况下函数将 return undefined。

但是调用 () => useInitialMount()（() => { return useInitialMount(); } 的简短语法）将 return 调用挂钩的值。

参考：Arrow Functions > Functions body.

测试自定义挂钩的 return 值

Testing return value of a custom hook

reactjs

react-testing-library

react-hooks

react-hooks-testing-library