TypeError: scrollIntoView n'est pas une fonction

Question

Je suis nouveau dans react-testing-library/jest et j'essaie d'écrire un test pour voir si la navigation des routes (en utilisant react-router-dom) est effectuée correctement. Jusqu'à présent, j'ai suivi le README et ce tutoriel sur la façon d'utiliser.

Un de mes composants utilise scrollIntoView dans une fonction locale, ce qui entraîne l'échec du test.

TypeError: this.messagesEnd.scrollIntoView is not a function

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

Voici la fonction de mon composant chatbot:

componentDidUpdate() {
    this.scrollToBottom();
}

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

Et voici un échantillon des tests qui échouent:

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

})

J'ai essayé d'utiliser une fonction de simulation, mais l'erreur persiste.

C'est là que this.messageEnd est affecté:

    <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>

J'ai référencé le code de cette question de débordement de pile: Comment faire défiler vers le bas pour réagir?

[~ # ~] 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'))

})

Answer 1

scrollIntoView n'est pas implémenté dans jsdom. Voici le problème: lien .

Vous pouvez le faire fonctionner en l'ajoutant manuellement:

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