React 测试库 - 无法测试 Window Resize React Hook

Question

我创建了一个自定义 React Hook，用于在窗口调整大小时获取视口宽度和高度（事件被去抖动）。钩子工作正常，但我一直无法找到使用 React 测试库进行测试的方法（我一直遇到错误）。

我在 CodeSandbox 中重新创建了应用程序（连同测试）以尝试调试，但在测试时遇到了不同的错误。

有时我会得到：

Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.`

但一般的故障是从钩子中获取的数据似乎没有返回。

expect(received).toBe(expected) // Object.is equality

Expected: 500
Received: undefined

这可能是我在 React 测试库中缺少的东西。

任何帮助解决问题的人都将非常感激！

在这里演示应用程序/测试：

https://codesandbox.io/s/useviewportsize-4l7gb?file=/src/use-viewport-size.test.tsx

============

解决方案

感谢@tmhao2005，问题似乎在于从document而不是window获取调整大小值：

  setViewportSize({
    width: window.innerWidth, //document.documentElement.clientWidth - doesn't work
    height: window.innerHeight //document.documentElement.clientHeight - doesn't work
  });

在应用程序中获取clientWidth/Height 似乎很好，但在 React 测试库测试中失败。

我选择了 client 大小，因为我认为这不包括 scollbar 宽度。

Answer 1

我认为您必须进行一些更改才能使您的测试再次运行：

• 您还没有等待去抖动功能工作，这是主要问题。因此，您可以使用模拟计时器或等到您的 debounce 函数被调用。

// Make your test as `async` in case of wanting to wait
test("should return new values on window resize", async () => {
  // If you go for mocking timer, uncomment this & below advance the timer 
  // jest.useFakeTimers();
  const { result } = renderHook(() => useViewportSize());

  act(() => {
    window.resizeTo(500, 500);
    //fireEvent(window, new Event("resize"));
  });

  // jest.advanceTimersByTime(251) // you can also use this way
  await mockDelay(debounceDelay); // `await` 300ms to make sure the function callback run

  expect(result.current.width).toBe(500);
  expect(result.current.height).toBe(500);
});

• 您可以改用模拟值来优化您的实现代码：

const debouncedHandleResize = debounce(() => {
  setViewportSize({
    // using your mock values
    width: window.innerWidth,
    height: window.innerHeight
  });
}, debounceTime);

PS：我还根据异步方式编辑了您的代码框：https://codesandbox.io/s/useviewportsize-forked-pvnc1?file=/src/use-viewport-size.test.tsx