测试使用 Resize Observer 的 React Hook

Question

我创建了一个简单的 Hook，每次调整元素大小时，它都会ResizeObserver在幕后运行setState更新。

它在浏览器中工作，但现在我遇到的问题是我不知道如何为它编写测试。我尝试过，react-testing-library/hooks但从未调用过钩子，我认为是因为 ResizeObserver。

我尝试过 Jest、Enzyme、@testing-library，但我找不到真正针对它运行测试的方法。

基本上，在测试中，我创建了一个组件

function Component {
  const [ref, width] = myHook();

  return (
     <div ref={ref}>{width}</div>
  )
}

然后我设置，例如：

window.innerWidth = 400（我试图调整大小并调用act函数内部的钩子，但什么也没有）。此时钩子将读取ref.current.width并返回width值

我希望value在调整大小时发生变化，但事实并非如此。然而，这个确切的组件在浏览器中使用时可以正常工作。我怎样才能确保它ResizeObserver 被调用？我也导入了 polyfill 但什么也没导入。模拟 ResizeObserver 将使我无法测试钩子，并且我无法在 React 函数之外调用钩子！任何帮助表示赞赏，谢谢！

Answer 1

react-testing-library在底层使用 jsdom 来模拟 DOM，并且它故意不实现像ResizeObserver您想要测试的布局代码。除了切换到像 cypress 这样在真实浏览器中运行测试的测试库之外，您还可以创建一个假浏览器MockResizeObserver并自己实现布局行为。

然后您可以使用jest.spyOn替换ResizeObserver为MockResizeObserver进行测试。