TypeError：scrollIntoView不是函数

  • Z时代
  • 2024-01-10
  • 分类：问答

我是react-testing-library / jest的新手，并尝试编写测试以查看路由导航（使用react-router-

dom）是否正确执行。到目前为止，我一直在关注自述文件和本教程的用法。

我的一个组件在局部函数中使用了scrollIntoView，这导致测试失败。

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

这是我的chatbot组件中的功能：

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'))
})

我试图使用模拟功能，但是错误仍然存​​在。

这是分配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>

我从此堆栈溢出问题引用了代码：如何在响应中滚动到底部？

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'))
})

回答：

scrollIntoView不在jsdom中实现。问题出在：link。

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

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

以上是 TypeError：scrollIntoView不是函数 的全部内容， 来源链接： utcz.com/qa/433640.html

回到顶部