如何使用 refs 测试 React 组件？

Question

我有一些反应功能组件：

export const Chat = props => {
  ..............
  const messagesRef = useRef(null);
  useEffect(() => messages && messagesRef.current.scrollTo(0, 99999), [messages]);
  .............
  return (
    ...........
    <div className='chat-content__list' ref={messagesRef}>
    </div>
  ............
  )
}

我不擅长测试，我只是想测试我的组件的渲染，代码是这样的：

it('Render Messages chat', async () => {
   const { container } = render(<Chat ...someProps />)
}

在运行这个测试之后，我得到这个错误：TypeError: messagesRef.current.scrollTo is not a function

如何在测试期间使用 refs 以及如何修复我的错误？

Answer 1

Jest React 在名为 jsdom 的浏览器抽象中测试运行。因为它不是真正的浏览器，所以并非所有功能都已实现。我怀疑 scrollTo 就是这样的一个例子。

例如，此表明 scrollIntoView 也未实现，要绕过它，您可以为其提供间谍。

Jest 支持为所有测试所需的设置代码提供一个设置文件。您可以考虑将模拟放在那里。

如何使用 refs 测试 React 组件？

How to test react component with refs?

ref

reactjs

jestjs

enzyme

react-testing-library