TypeError: scrollIntoView is not a function

Question

I am new to react-testing-library / jest and attempting to write a test to see if the navigation of routes (using react-router-dom) is performed correctly. So far I have been following the README and this tutorial on how to use.

One of my components uses scrollIntoView in a local function and this causes the test to fail.

TypeError: this.messagesEnd.scrollIntoView is not a function

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

This is the function in my chatbot component:

componentDidUpdate() {
    this.scrollToBottom();
}

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

And this is a sample of the tests that fail:

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

})

I have tried to use a mock function, however the error still remains.

This is where this.messageEnd is assigned:

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

I referenced code from this stack overflow question: How to scroll to bottom in 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'))

})

Can you post where you assign the value of this.messagesEnd? — Gio Polvara
– Gio Polvara, Commented Nov 13, 2018 at 7:43
Would it work if you force the casting? (<HTMLElement>this.messagesEnd).scrollIntoView({ behavior: "smooth" }); — Iskandar Reza
– Iskandar Reza, Commented Nov 14, 2018 at 0:28

Gio Polvara · Accepted Answer · 2018-11-14 07:16:01Z

135

scrollIntoView is not implemented in jsdom. Here's the issue: link.

You might get it working by manually adding it:

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

answered Nov 14, 2018 at 7:16

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Charklewis Over a year ago

Thank you @Gpx, this worked. I have added the solution to the original post.

kaushalyap Over a year ago

can you please add bit of context, where should I place this line in React?

Gio Polvara Over a year ago

It depends on how your testing environment is set up. In Jest, you can have setup files: jestjs.io/docs/configuration#setupfiles-array

Kriti · Accepted Answer · 2020-02-17 14:57:12Z

92

If we want to unit test 'scrollIntoView' function in a react application using react testing library then we can mock the function using 'jest'.

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

edited Feb 17, 2020 at 14:57

answered Feb 14, 2020 at 11:27

Kriti

2,40317 silver badges16 bronze badges

6 Comments

Kriti Over a year ago

It's like we are mocking scrollIntoView function.

Marcello B. Over a year ago

@Kriti. Please explain how this code helps the OP solve their issue in the answer itself. Please read this article to get a better understanding of what an answer is. Please also go through the site tour

darkziul Over a year ago

just an observation, correct would be to use without immediate invocation. So, instead of jest.fn (), use jest.fn without parentheses.

Lee Aug 11, 2025 at 11:46

Calling jest.fn() is correct here. Calling jest.fn() returns a mocked function that is then assigned. Then every time scrollIntoView is called, it will be calling the mocked function. From a technical standpoint, just assigning jest.fn would still work, but every time scrollIntoView was called it would actually be generating a new mock function and throwing the mocked function away. While this works for the OPs problem, it's not the correct way to do it.

KeitelDOG Over a year ago

Problem with mocking scrollIntoView is that, although we can make the mock function to call another function, we can never be sure that the scrolling will trigger that other function in a real case. Let's take an infinite scroll, I can still pass the test and my InfiniteScroller component does not trigger a load more in real case.

darkziul Aug 12, 2025 at 12:19

@Lee, you are correct.

Collectives™ on Stack Overflow

TypeError: scrollIntoView is not a function

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related