web-dev-qa-db-ja.com

TypeError：scrollIntoViewは関数ではありません

React-testing-library/jestを初めて使用し、ルートのナビゲーション（react-router-domを使用）が正しく実行されるかどうかを確認するテストを作成しようとしています。これまでのところ、使用方法について [〜＃〜] readme [〜＃〜] とこれ tutorial に従っています。

コンポーネントの1つがローカル関数で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>

このスタックオーバーフローの質問のコードを参照しました： 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'))

})
javascriptreactjsreact-routerjestjsreact-testing-library
8
Charklewis

scrollIntoViewはjsdomに実装されていません。問題は次のとおりです。 link 。

手動で追加することで機能する場合があります。

window.HTMLElement.prototype.scrollIntoView = function() {};
8
Giorgio Polvara - Gpx