类型错误：scrollIntoView不是一个函数。

Question

我对react-testing-library/jest还不熟悉，试图编写一个测试来验证路由导航（使用react-router-dom）是否正确执行。目前，我一直在遵循README和这个教程的指导。

我的其中一个组件在本地函数中使用scrollIntoView，这导致测试失败。

TypeError: this.messagesEnd.scrollIntoView is not a function

  45 |
  46 |     scrollToBottom = () => {
> 47 |         this.messagesEnd.scrollIntoView({ behavior: "smooth" });
     |                          ^
  48 |     }
  49 |
  50 | 

这是我的聊天机器人组件中的函数：

componentDidUpdate() {
    this.scrollToBottom();
}

scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}

这是一些失败的测试样例：

test('<App> default screen', () => {

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick) <-- test fails

    expect(getByTestId('chatbot'))

})

我尝试使用模拟函数，但错误仍然存在。

这是 where this.messageEnd 被分配的地方：

    <div className="chatbot">
        <div className="chatbot-messages">
            //render messages here
        </div>
        <div className="chatbot-actions" ref={(el) => { this.messagesEnd = el; }}>
            //inputs for message actions here
        </div>
    </div>

我参考了这个 stack overflow 问题的代码：如何在 React 中滚动到底部？

解决方案

test('<App> default screen', () => {

    window.HTMLElement.prototype.scrollIntoView = function() {};

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick)

    expect(getByTestId('chatbot'))

})

- Charklewis

---

你能否告诉我在哪里给 this.messagesEnd 赋值？ - Gio Polvara

当然，我已经更新了原始问题。 - Charklewis

如果强制转换类型，它会起作用吗？ (<HTMLElement>this.messagesEnd).scrollIntoView({ behavior: "smooth" }); - Iskandar Reza

Answer 1

scrollIntoView 在 jsdom 中尚未实现。这是问题所在：链接。

您可以通过手动添加来使其正常工作：

window.HTMLElement.prototype.scrollIntoView = function() {};

- Giorgio Polvara - Gpx

---

谢谢@Gpx，这个方法可行。我已经将解决方案添加到原始帖子中。 - Charklewis

请问您能否添加一些上下文，我应该在React中的哪里放置这行代码？ - user158

这取决于您的测试环境设置方式。在 Jest 中，您可以拥有设置文件：https://jestjs.io/docs/configuration#setupfiles-array - Gio Polvara

Answer 2

如果我们想在使用React测试库测试React应用程序中的“scrollIntoView”函数，则可以使用“jest”模拟该函数。

window.HTMLElement.prototype.scrollIntoView = jest.fn()

- Kriti

---

就像我们在嘲笑scrollIntoView函数。 - Kriti

@Kriti。请在答案中解释这段代码如何帮助OP解决他们的问题。请阅读此文章以更好地了解什么是答案。请还要浏览一下该网站的导览。 - Marcello B.

仅仅是一种观察，正确的做法是没有立即调用的情况下使用。所以，应该使用jest.fn而不是带括号的 jest.fn()。 - darkziul

模拟 scrollIntoView 的问题在于，虽然我们可以让模拟函数调用另一个函数，但我们永远无法确定滚动是否会在实际情况下触发那个其他函数。以无限滚动为例，我仍然可以通过测试，而我的 InfiniteScroller 组件在实际情况下不会触发加载更多。 - KeitelDOG