javascriptreactjsreact-routerreact-testing-library

Simplest test for react-router's Link with @testing-library/react


I'm trying to understand how to best test that react-router behaves as expected with @testing-library/react.

The simplest test I can think of, is to verify that clicking a link changes the URL. I know that ideally I should test that clicking on a link renders a new component, but that adds a lot of boilerplate to the test.

So here's my failing example:

import { MemoryRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
import { createMemoryHistory } from 'history';

it('routes to a new route', async () => {
  const history = createMemoryHistory();
  const { getByText } = render(
    <MemoryRouter history={history}>
      <Link to="/hello">Click me</Link>
    </MemoryRouter>
  );

  fireEvent.click(getByText('Click me'));
  await waitFor(() => expect(history.location.pathname).to.equal('/hello')); // Fails
});

Solution

  • This is how I do it : mocking history.push, then spy on its calls.

    import { MemoryRouter } from 'react-router-dom';
    import { render } from '@testing-library/react';
    import { createMemoryHistory } from 'history';
    
    it('routes to a new route', async () => {
      const history = createMemoryHistory();
    
      // mock push function
      history.push = jest.fn();
    
      const { getByText } = render(
        <MemoryRouter history={history}>
          <Link to="/hello">Click me</Link>
        </MemoryRouter>
      );
    
      // could be userEvent.click
      // https://testing-library.com/docs/ecosystem-user-event/#clickelement-eventinit-options
      fireEvent.click(getByText('Click me'));
    
      // spy on push calls, assert on url (parameter)
      expect(history.push).toHaveBeenCalledWith('/hello');
    });