DEV Community

Sophia Brandt
Sophia Brandt

Posted on • Originally published at on

Test Redirect With Jest, React-Router and React-Testing-Library

You've set up react-testing-library with Jest and react-router. You want to check that a component successfully redirects to another page. But how?

Your React application comes with a protected route. If a user is not authenticated, the app should redirect the user to the login screen.

You've managed to set up react-router-dom for your component.

For example, here's an excerpt from a UserStatus.jsx component that only an authenticated user should be able to access:

import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class UserStatus extends Component {
  // some state, etc.
  // ... code here

  // the parent component handles the authentication
  // and passes down a boolean flag
  render() {
    if (!this.props.isAuthenticated) {
      return <Redirect to="/login" />
    return <div>/* JSX here */</div>

export default UserStatus
Enter fullscreen mode Exit fullscreen mode

How can we test the Redirect with react-testing-library and Jest?

Create a Testing Router For react-testing-library

We can copy the code for testing react-router straight from the documentation.

Create a new file, for example, setupTests.js:

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

function renderWithRouter(
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
  } = {}
) {
  return {
    ...render(<Router history={history}>{ui}</Router>),

export default renderWithRouter
Enter fullscreen mode Exit fullscreen mode

Create a Test File And Use the Testing Router

You might need to mock a function like an API call with axios.

That's where jest.mock('axios') comes into play.

You'll definitely need the fake testing router that we created earlier.

Here's the test file for UserStatus.jsx: import renderWithRouter from setupTests.js and use it like so:

import React from 'react'
import { cleanup, wait } from '@testing-library/react'
import renderWithRouter from '../../setupTests'
import '@testing-library/jest-dom/extend-expect'
import axios from 'axios'

import UserStatus from '../UserStatus'



// test for what happens when authenticated
// ... some code here

// test for the redirect
describe('when unauthenticated', () => {
  axios.get.mockImplementation(() =>
      data: { status: 'fail' },

  const props = {
    isAuthenticated: false,

  it('redirects when authToken invalid', async () => {
    const { history } = renderWithRouter(<UserStatus {...props} />)
    await wait(() => {
Enter fullscreen mode Exit fullscreen mode

And now?

I found the documentation for react-testing-library quite helpful.

You should give it a look.

Inspired By

Top comments (0)