[React Testing] Ensure Error Boundaries Can Successfully Recover from Errors

import React from ‘react‘
import {reportError} from ‘./api‘

class ErrorBoundary extends React.Component {
  state = {hasError: false}
  componentDidCatch(error, info) {
    this.setState({hasError: true})
    reportError(error, info)
  }
  tryAgain = () => this.setState({hasError: false})
  render() {
    return this.state.hasError ? (
      <div>
        <div role="alert">There was a problem.</div>{‘ ‘}
        <button onClick={this.tryAgain}>Try again?</button>
      </div>
    ) : (
      this.props.children
    )
  }
}

export {ErrorBoundary}

import React from ‘react‘
import { render, fireEvent } from ‘@testing-library/react‘
import { ErrorBoundary } from ‘./error-boundary‘
import { reportError as mockReportError } from ‘./components/extra/api‘

function Bomb(shouldThrow) {
  if (shouldThrow) {
    throw new Error(‘Bomb‘)
  } else {
    return null
  }
}

jest.mock(‘./components/extra/api‘)

beforeAll(() => {
  // do log out any error message
  jest.spyOn(console, ‘error‘).mockImplementation(() => {})
})

afterAll(() => {
  console.error.mockRestore()
})

test(‘calls reportError and renders that there was a problem‘, () => {
  mockReportError.mockResolvedValueOnce({ success: true })
  const { rerender, getByRole, getByText, queryByText, queryByRole } = render(
    <ErrorBoundary>
      <Bomb />
    </ErrorBoundary>,
  )

  rerender(
    <ErrorBoundary>
      <Bomb shouldThrow={true} />
    </ErrorBoundary>,
  )

  const error = expect.any(Error)
  const errorInfo = { componentStack: expect.stringContaining(‘Bomb‘) }
  expect(mockReportError).toHaveBeenCalledWith(error, errorInfo)
  expect(mockReportError).toHaveBeenCalledTimes(1)

  expect(console.error).toHaveBeenCalledTimes(2)

  expect(queryByRole(‘alert‘)).toBeInTheDocument()
  expect(getByRole(‘alert‘).textContent).toMatchInlineSnapshot(
    ‘Something went wrong.‘,
  )

  rerender(
    <ErrorBoundary>
      <Bomb shouldThrow={false} />
    </ErrorBoundary>,
  )

  const button = getByText(/try again/i)
  fireEvent.click(button)
  // reset the mock state
  mockReportError.mockClear()
  console.error.mockClear()

  expect(mockReportError).not.toHaveBeenCalled()
  expect(console.error).not.toHaveBeenCalled()
  expect(queryByRole(‘alert‘)).not.toBeInTheDocument()
  expect(queryByText(/try again/i)).not.toBeInTheDocument()
})

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

  // reset the mock state
  mockReportError.mockClear()
  console.error.mockClear()