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

‘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

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

标签：author   imp   func   function   from   editor   value   testing   disabled