测试一个使用 Resize Observer 的 React Hook答案

【问题标题】：Test a React Hook that uses Resize Observer测试一个使用 Resize Observer 的 React Hook
【发布时间】：2020-02-15 02:33:30
【问题描述】：

我创建了一个简单的 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 函数之外调用钩子！任何帮助表示赞赏，谢谢！

【问题讨论】：

标签： reactjs unit-testing react-hooks

【解决方案1】：

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

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

【讨论】：