Question

我创建了一个简单的Hook，该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 Function之外调用挂钩！感谢您的任何帮助，谢谢！

Answer 1

react-testing-library 在底层使用 jsdom 来模拟 DOM，它deliberately doesn't implement layout code 就像您要测试的 ResizeObserver。除了切换到像 cypress 这样在真实浏览器中运行测试的测试库之外，您还可以创建一个虚假的 MockResizeObserver 并自己实现布局行为。

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

测试一个使用Resize Observer的React Hook

1 个答案: