zoukankan      html  css  js  c++  java
  • [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission

    Once the data has been saved on the server, we’ll want to redirect the user to the home screen with react-router’s <Redirect /> component. Let’s go ahead and mock that component as well and verify that it’s being rendered with the correct props. We’ll have to make our test asynchronous so we can make that assertion because the <Redirect /> component is rendered after the async call happens.

    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)
      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))
      }
      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>
        </form>
      )
    }
    
    export { Editor }

    Test:

    import React from 'react'
    import { render, fireEvent, waitFor } from '@testing-library/react'
    import { Redirect as MockRedirect } from 'react-router'
    import { savePost as mockSavePost } from '../api'
    import { Editor } from '../extra/redirect'
    
    // Mock Router redirect
    jest.mock('react-router', () => {
      return {
        Redurect: jest.fn(() => null),
      }
    })
    
    jest.mock('../api')
    
    afterEach(() => {
      jest.clearAllMocks()
    })
    
    test('renders a form with title, content, tags, and a submit button', async () => {
      mockSavePost.mockResolvedValueOnce()
      const fakeUser = { id: 'user-1' }
      const { getByLabelText, getByText } = render(<Editor user={fakeUser} />)
      const fakePost = {
        title: 'Test Title',
        content: 'Test content',
        tags: ['tag1', 'tag2'],
      }
      getByLabelText(/title/i).value = fakePost.title
      getByLabelText(/content/i).value = fakePost.content
      getByLabelText(/tags/i).value = fakePost.tags.join(', ')
      const submitButton = getByText(/submit/i)
    
      fireEvent.click(submitButton)
    
      expect(submitButton).toBeDisabled()
    
      expect(mockSavePost).toHaveBeenCalledWith({
        ...fakePost,
        authorId: fakeUser.id,
      })
      expect(mockSavePost).toHaveBeenCalledTimes(1)
    
      await waitFor(() => expect(MockRedirect).toHaveBeenCalledWith({ to: '/' }, {}))
    })
  • 相关阅读:
    《浏览器工作原理与实践》读书笔记(4)
    在django中使用原生sql语句
    异步任务 ---- django-celery
    vue上传视屏或者图片到七牛云
    django项目初始化
    mysql 更新并生成指定范围随机数
    opencv基本命令学习整理
    docker分配CPU、内存资源
    傅里叶分析
    websocket协议性能测试(jmeter版)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12819146.html
Copyright © 2011-2022 走看看