[React Testing] Error State with React Testing Library, findBy*

We have the happy path covered for our post editor component, but what happens if there’s an error in saving the user’s information? We should probably show them an error message and give them the chance to try again. Let’s add a new test for this error case and implement some error handling.

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)
  const [error, setError] = React.useState(null)
  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),
      (error) => {
        setIsSaving(false)
        setError(error.data.error)
      },
    )
  }
  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>

      {error ? <div role="alert">{error}</div> : null}
    </form>
  )
}

export { Editor }

Test:

test('should render an error message from the server', async () => {
  const testError = 'test error'
  mockSavePost.mockRejectedValueOnce({ data: { error: testError } })
  const fakeUser = userBuilder()
  const { getByText, findByRole } = render(<Editor user={fakeUser} />)
  const submitButton = getByText(/submit/i)

  fireEvent.click(submitButton)
  const postError = await findByRole('alert')
  expect(postError).toHaveTextContent(testError)
  expect(submitButton).not.toBeDisabled()
})

findBy*: they are async function, uses for looking DOM element come in async