TypeError: scrollIntoView ist keine Funktion

Ich bin neu in der React-Testing-Library/Jest und versuche, einen Test zu schreiben, um zu sehen, ob die Navigation von Routen (mit React-Router-Dom) korrekt durchgeführt wird. Bisher habe ich das verfolgt Liesmich und das Lernprogramm zur Verwendung.

Eine meiner Komponenten verwendet scrollIntoView in einer lokalen Funktion und dies führt dazu, dass der Test fehlschlägt.

TypeError: this.messagesEnd.scrollIntoView is not a function

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

Dies ist die Funktion in meiner Chatbot-Komponente:

componentDidUpdate() {
    this.scrollToBottom();
}

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

Und dies ist ein Beispiel der Tests, die fehlschlagen:

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

})

Ich habe versucht, eine Scheinfunktion zu verwenden, der Fehler bleibt jedoch weiterhin bestehen.

Hier wird this.messageEnd zugewiesen:

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

Ich habe auf Code aus dieser Stapelüberlauffrage verwiesen: Wie scrolle ich in React nach unten?

LÖSUNG

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 ist nicht in jsdom implementiert. Hier ist das Problem: Verknüpfung.

Sie könnten es zum Laufen bringen, indem Sie es manuell hinzufügen:

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

Wenn wir die Funktion „scrollIntoView“ in einer React-Anwendung mithilfe der React-Testing-Bibliothek einem Unit-Test unterziehen möchten, können wir die Funktion mit „Jest“ verspotten.

window.HTMLElement.prototype.scrollIntoView = jest.fn()