我是React-Testing-Library / Jest的新手,正在尝试编写测试以查看路由导航(使用react-router-dom)是否正确执行。到目前为止,我一直在关注README和本tutorial的使用方法。
我的一个组件在本地函数中使用了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'))
})
我尝试使用模拟函数,但是错误仍然存在。
在此分配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>
我从这个堆栈溢出问题中引用了代码:How to scroll to bottom in 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'))
})
答案 0 :(得分:13)
如果我们要使用react测试库对react应用程序中的'scrollIntoView'函数进行单元测试,则可以使用'jest'模拟该函数。
window.HTMLElement.prototype.scrollIntoView = jest.fn()
答案 1 :(得分:4)