zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    0218 scikitlearn库之k*邻算法
    087 Python文件的两种用途
    0217 kd树
    Java8的十大新特性
    Java8的十大新特性
    Spring加载Bean的流程(源码分析)
    Spring加载Bean的流程(源码分析)
    线程池原理(JDK1.8)
    JS原生Ajax和jQuery的Ajax与代码示例ok
    JS原生Ajax和jQuery的Ajax与代码示例ok
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12819820.html
Copyright © 2011-2022 走看看