类型错误:scrollIntoView 不是函数 [英] TypeError: scrollIntoView is not a function
问题描述
我是 react-testing-library/jest 的新手,并试图编写一个测试来查看路线导航(使用 react-router-dom)是否正确执行.到目前为止,我一直在关注 README 和这个 教程关于如何使用.
我的一个组件在本地函数中使用了 scrollIntoView,这会导致测试失败.
TypeError: this.messagesEnd.scrollIntoView 不是函数45 |46 |scrollToBottom = () =>{>47 |this.messagesEnd.scrollIntoView({行为:平滑"});|^48 |}49 |50 |
这是我的聊天机器人组件中的功能:
componentDidUpdate() {this.scrollToBottom();}scrollToBottom = () =>{this.messagesEnd.scrollIntoView({行为:平滑"});}
这是失败的测试示例:
test('默认屏幕', () => {const { getByTestId, getByText } = renderWithRouter(<App/>)期望(getByTestId('索引'))const leftClick = {按钮:0}fireEvent.click(getByText('View Chatbot'), leftClick) <-- 测试失败期望(getByTestId('聊天机器人'))})
我尝试使用模拟函数,但错误仍然存在.
这是分配 this.messageEnd 的地方:
<div className="chatbot-messages">//在这里渲染消息<div className="chatbot-actions" ref={(el) =>{ this.messagesEnd = el;}}>//这里是消息操作的输入
我从这个堆栈溢出问题中引用了代码:如何滚动到底部有反应吗?
解决方案
test('默认屏幕', () => {window.HTMLElement.prototype.scrollIntoView = function() {};const { getByTestId, getByText } = renderWithRouter(<App/>)期望(getByTestId('索引'))const leftClick = {按钮:0}fireEvent.click(getByText('View Chatbot'), leftClick)期望(getByTestId('聊天机器人'))})
scrollIntoView
未在 jsdom 中实现.这是问题所在:link.
您可以通过手动添加来使其工作:
window.HTMLElement.prototype.scrollIntoView = function() {};
I am new to react-testing-library / jest and attempting to write a test to see if the navigation of routes (using react-router-dom) is performed correctly. So far I have been following the README and this tutorial on how to use.
One of my components uses scrollIntoView in a local function and this causes the test to fail.
TypeError: this.messagesEnd.scrollIntoView is not a function
45 |
46 | scrollToBottom = () => {
> 47 | this.messagesEnd.scrollIntoView({ behavior: "smooth" });
| ^
48 | }
49 |
50 |
This is the function in my chatbot component:
componentDidUpdate() {
this.scrollToBottom();
}
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}
And this is a sample of the tests that fail:
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'))
})
I have tried to use a mock function, however the error still remains.
This is where this.messageEnd is assigned:
<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>
I referenced code from this stack overflow question: How to scroll to bottom in react?
SOLUTION
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
is not implemented in jsdom. Here's the issue: link.
You might get it working by manually adding it:
window.HTMLElement.prototype.scrollIntoView = function() {};
这篇关于类型错误:scrollIntoView 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!