Soy nuevo en react-testing-library/jest e intento escribir una prueba para ver si la navegación de rutas (usando react-router-dom) se realiza correctamente. Hasta ahora he estado siguiendo el LÉAME y este tutorial sobre cómo usarlo.

Uno de mis componentes usa scrollIntoView en una función local y esto hace que la prueba falle.

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

Esta es la función en mi componente de chatbot:

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

Y esta es una muestra de las pruebas que fallan:

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

He intentado usar una función simulada, sin embargo, el error persiste.

Aquí es donde se asigna 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>

Hice referencia al código de esta pregunta de desbordamiento de pila: ¿Cómo desplazarse hacia abajo en reaccionar?

SOLUCIÓN

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