如何使用 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 不是一个函数

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

Answer 1

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

例如，此 answer 表明 scrollIntoView 也未实现，要解决它，您可以为其提供一名间谍。

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