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

  • 相关阅读:
    ege图形化编程配置过程及出现的问题解决方法
    两个头文件相互包含导致未定义类型
    20180318CSP比赛
    jdk7和jdk8都下载了 如何设置java版本为jdk7?
    CCF|CSP|模拟试题|游戏
    2018蓝桥杯|基础练习|十六进制转八进制
    2018蓝桥杯|历届试题|翻硬币
    2018蓝桥杯|历届试题|数字游戏
    2020年9月18日 可变字符序列:StringBuffer和StringBuilder(尽量掌握底层代码跟踪分析的能力)
    2020年9月17日 String 常用方法四、五、六、七、八、九
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12819820.html
Copyright © 2011-2022 走看看