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: '/' }, {}))
    })
  • 相关阅读:
    tlb、tlh和tli文件的关系
    String算法
    Reverse A String by STL string
    windows内存管理复习(加深了理解得很!)
    [转载]有关DLL中New和外部Delete以以及跨DLL传递对象的若干问题
    顺势工作时间
    C++箴言:绝不在构造或析构期调用虚函数
    inline函数复习
    从编译器的角度更加深入考虑封装的使用
    复习:constructor和destructor的compiler实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12819146.html
Copyright © 2011-2022 走看看