[React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission

Once the data has been saved on the server, we’ll want to redirect the user to the home screen with react-router’s <Redirect /> component. Let’s go ahead and mock that component as well and verify that it’s being rendered with the correct props. We’ll have to make our test asynchronous so we can make that assertion because the <Redirect /> component is rendered after the async call happens.

 

Component:

import React from 'react'
import { Redirect } from 'react-router'
import { savePost } from './api'

function Editor({ user }) {
  const [isSaving, setIsSaving] = React.useState(false)
  const [redirect, setRedirect] = React.useState(false)
  function handleSubmit(e) {
    e.preventDefault()
    const { title, content, tags } = e.target.elements
    const newPost = {
      title: title.value,
      content: content.value,
      tags: tags.value.split(',').map((t) => t.trim()),
      authorId: user.id,
    }
    setIsSaving(true)
    savePost(newPost).then(() => setRedirect(true))
  }
  if (redirect) {
    return <Redirect to="/" />
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title-input">Title</label>
      <input id="title-input" name="title" />

      <label htmlFor="content-input">Content</label>
      <textarea id="content-input" name="content" />

      <label htmlFor="tags-input">Tags</label>
      <input id="tags-input" name="tags" />

      <button type="submit" disabled={isSaving}>
        Submit
      </button>
    </form>
  )
}

export { Editor }

 

Test:

import React from 'react'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { Redirect as MockRedirect } from 'react-router'
import { savePost as mockSavePost } from '../api'
import { Editor } from '../extra/redirect'

// Mock Router redirect
jest.mock('react-router', () => {
  return {
    Redurect: jest.fn(() => null),
  }
})

jest.mock('../api')

afterEach(() => {
  jest.clearAllMocks()
})

test('renders a form with title, content, tags, and a submit button', async () => {
  mockSavePost.mockResolvedValueOnce()
  const fakeUser = { id: 'user-1' }
  const { getByLabelText, getByText } = render(<Editor user={fakeUser} />)
  const fakePost = {
    title: 'Test Title',
    content: 'Test content',
    tags: ['tag1', 'tag2'],
  }
  getByLabelText(/title/i).value = fakePost.title
  getByLabelText(/content/i).value = fakePost.content
  getByLabelText(/tags/i).value = fakePost.tags.join(', ')
  const submitButton = getByText(/submit/i)

  fireEvent.click(submitButton)

  expect(submitButton).toBeDisabled()

  expect(mockSavePost).toHaveBeenCalledWith({
    ...fakePost,
    authorId: fakeUser.id,
  })
  expect(mockSavePost).toHaveBeenCalledTimes(1)

  await waitFor(() => expect(MockRedirect).toHaveBeenCalledWith({ to: '/' }, {}))
})