[v6] Best way to test routing components

[ericchernuka]

I thought I'd ask in hopes someone could point me in a good direction in regards to testing components within an app that is leveraging v6. In v5, it was common to create a memory history object to pass into Router, but with v6 this is no longer possible.

Is there a recommended approach for testing?

[bzalasky]

Whether we're testing our AppRoutes component or other components that assume they're within a Router, we use the MemoryRouter component. In the case of AppRoutes, we mock the components passed as element props to the routes, and make assertions that their classname properties are in the DOM:

// jest.setup.js (not strictly necessary, but useful for understanding the way the
// spec is written below w/ Testing Library)
global.render = (...args) => {
  const {container, ...rest} = render(...args)
  const find = container.querySelector.bind(container)
  const findAll = container.querySelectorAll.bind(container)
  return {container, find, findAll, ...rest}
}

// my-routes.spec.js
import {MemoryRouter} from 'react-router-dom'
import MyRoutes from './my-routes'
import * as MyPage from './my-page'

const Container = ({className}) => <div className={className} />

describe(__filename, () => {
  let currentRoute
  let find

  beforeEach(() => {
    jest
      .spyOn(MyPage, 'default')
      .mockImplementation(props => (
        <Container className="my-page" {...props} />
      ))
    ;({find} = render(
      <MemoryRouter initialEntries={[currentRoute]}>
        <MyRoutes />
      </MemoryRouter>
    ))
  })

  describe('/my-page', () => {
    beforeAll(() => {
      currentRoute = '/my-page'
    })
      it('should render my page', () => {
        expect(find('.my-page')).toBeInTheDocument()
      })
  })
})

For many other cases, all that's needed is wrapping the component you're rendering for your test in MemoryRouter. Occasionally, you may need to do a bit more, but it'll be fairly similar to what's above.

[ericchernuka]

Thanks @bzalasky for the response. I guess I'm running into an issue where I want to test the current URL based on redirects/clicking etc and I no longer have access to the history object from MemoryRouter. Only thing I can think is to have a component that uses the useLocation hook to then pass it back to a custom render function.

[mjackson]

Check out our <Link> click tests. They use a <MemoryRouter> and use react-dom/test-utils to wrap our link click actions so it gives time for React to run to completion before making your assertions.

[ericchernuka]

Thanks @mjackson. Wonder if I'm attempting to test something incorrectly since I'm attempting to assert the current URL is what I'm expecting. These tests are asserting the content changes correctly as per the route change. Maybe I'm overthinking my assertions.

I did end up creating a similar solution to the Router tests where a location component sets an instance variable which can be used to assert the return location pathname.