Jest and React Testing Library not loading the final DOM on page load

Question

I'm trying to test my react app using Jest and React Testing Library. In this, I want to see the message when the login page fully loaded. On initial load, my login page shows a "loading.." message. After that the input fiels gets loaded slowly.

I was trying to find an text element, when the DOM has fully loaded. Using this

screen.findAllByText("Basic login page") ;

But, the screen.debug is only loading it till the "loading.." phase only.

test("User should see login page", async () => {
        render(<></>, {route: "/login"});
        await screen.findAllByText("Basic login page") ;
        screen.debug();
    });

Is there a way out to solve this?

Thanks.

Answer 1

React Testing Library is for unit tests, so you need to set up an in memory browser history and configure your router.

Check the docs here: https://testing-library.com/docs/example-react-router

You'd want your test to be something like like this:

import { createMemoryHistory } from 'history'

...

test('User should see login page', () => {
  const history = createMemoryHistory()
  history.push('/login')
  const { findByText } = render(
    <Router history={history}>
      <App />
    </Router>
  );
  expect(findByText('Basic login page')).toBeTruthy();
})