Test that the component appears only after scrolling down is not possible?

[DimiTech]

Hi Kent, thanks for all the hard work!

I can't seem to verify with tests that my component is appearing after the user scrolls down past a certain point. In this particular case, the <GoToTopButton> shows itself only after the element with id goToFragmentId is above the viewport.
But that doesn't seem to happen for some reason. I've included some sample code.

1. I simulate the scroll event await fireEvent.scroll(window, { target: { scrollY: 300 } });
2. I wait for 200ms (since the 'scroll' event listener is debounced)
3. The component is not found after 200ms of the scroll event.
4. console.log(window.scrollY); Outputs: 300, which is correct
5. console.log(getByText('Top of the Page - Scroll Down ⬇️').getBoundingClientRect().bottom); Outputs 0 which is incorrect!

I'm not sure why is this so, the text is long enough to take a couple of pages of normal screen height.

    it('renders the component only after scrolling down', async () => {
        const goToFragmentId = 'text-top';
        const { getByText, getByLabelText } = render(
            <div>
                <GoToTopButton goToFragmentId={goToFragmentId} />
                <h1 id={goToFragmentId}>Top of the Page - Scroll Down ⬇️</h1>
                <p>
                    {`Consectetur, from a Lorem Ipsum passage.... lots and lots of looooong text...`}
                </p>
            </div>
        );
        await fireEvent.scroll(window, { target: { scrollY: 300 } });
        await wait(
            () => {
                console.log(window.scrollY); // Output: 300
                console.log(getByText('Top of the Page - Scroll Down ⬇️').getBoundingClientRect().bottom); // Output: 0
                expect(getByLabelText('Go to Top')).toBeInTheDocument();
            },
            { timeout: 200 }
        );
    });

Thanks for looking into this!
Dusan D.

[kentcdodds]

If you're running your tests in jsdom that's the issue. JSDOM doesn't support layout. You'll need to write these tests in a real browser to test this. Try Cypress, TestCafe, or Puppeteer. There are Testing Library implementations for all three of these.

Good luck!

[DimiTech]

Ok so react-testing-library is not meant for these kind of use cases.

Thanks a lot for the super quick response!

[kentcdodds]

To be clear: the issue you're having is with jsdom's limitations... Not React Testing Library. If you run your tests in a real browser then it will work just fine. React Testing Library works in a real browser as well as jest/jsdom.

So, React Testing Library is absolutely meant for these kinds of use cases. It's jsdom that's not meant for these kind of use cases.

[DimiTech]

Thanks for clearing that up :)

[alexVasylenko]

@kentcdodds Hi! Now I am trying to use react-testing-library with jest-puppeteer env and as a result I have the next error:

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

So, do you have any example how to replace jsdom in react-testing-library? Thank you

[MatanBobi]

Hi @alexVasylenko, can you please clarify what you mean?
If you're looking for a way to use puppeteer with testing-library you can have a look at:
https://testing-library.com/docs/pptr-testing-library/intro

If you meant something else, please elaborate cause I'm not sure I got what you mean.. thanks!