通过提交按钮测试 axios 响应数据触发的反应简单方法

Question

有没有简单的方法来测试提交按钮触发的axios响应数据？

而且总的来说，一旦是稍微复杂一些或异步的测试，我真的会遇到麻烦。有没有一个简单的工具可以让我以简单流畅的方式创建测试？

import React, { useEffect, useState } from "react"
import axios from "axios"
   const ContactForm = () => {

      const onSubmitFormHandler = (event) => {
      const url = process.env.REACT_APP_SERVER_API + "/lead"

      try {
      axios
      .post(url, {
       headers: {
         "Content-Type": "application/json",
       },
       params: {
        data: leadObj,
       },
     })
     .then(function (response) {
      if (response.status === 200) {
         // do simething 
     
      } else {
       // do simething else
      }
     })
     .catch((error) => {
   
     })
   }
 }
  return (
      <form onSubmit={onSubmitFormHandler}>
              <button data-testid="submit" type="submit">
                {!loader ? "send" : <Loader />}
              </button>     
      </form>
    )
  }
export default ContactForm

Answer 1

这是一个直接来自 react-testing-library 文档的示例，我认为您可以很容易地使用上面的代码示例重新实现它。（查看下面的 link 了解更多详情！）

https://testing-library.com/docs/react-testing-library/example-intro/

您应该可以用下面的 /greetings

替换您的 url

当您的 api returns 为 200 时，您将需要做一些事情，也许像下面示例中那样的警报可能是一个好的开始？除非你刚刚清除了结果供我们在这里查看。

如果您的 onSubmit 是触发器，您还应该能够使用 screen.getByTestId 而不是 screen.getByText。

react-testing-library 有一些很棒的文档，还有一个 discord 社区，您也可以加入！希望这会有所帮助。祝你好运！

// __tests__/fetch.test.js
import React from 'react'
import {rest} from 'msw'
import {setupServer} from 'msw/node'
import {render, fireEvent, waitFor, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import Fetch from '../fetch'

const server = setupServer(
  rest.get('/greeting', (req, res, ctx) => {
    return res(ctx.json({greeting: 'hello there'}))
  }),
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('loads and displays greeting', async () => {
  render(<Fetch url="/greeting" />)

  fireEvent.click(screen.getByText('Load Greeting'))

  await waitFor(() => screen.getByRole('heading'))

  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})

test('handles server error', async () => {
  server.use(
    rest.get('/greeting', (req, res, ctx) => {
      return res(ctx.status(500))
    }),
  )

  render(<Fetch url="/greeting" />)

  fireEvent.click(screen.getByText('Load Greeting'))

  await waitFor(() => screen.getByRole('alert'))

  expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!')
  expect(screen.getByRole('button')).not.toBeDisabled()
})

Answer 2

我将尝试详细解释它，以便您更快地理解这个想法，并且对您来说似乎不再复杂。要测试您的 API 服务与 ReactApp 的交互，您应该模拟 API 服务 method/promise 交互的不同情况，因此它要么是成功的一些数据，要么是失败或待定。

在过去漫长的日子里，我们创建了一个假客户端，我们在其中伪造调用和 return 类似于 API 在真实调用时返回给您的应用程序的模拟数据被处理。我们可以使用例如。 jest.mock 然后你做出决定或拒绝你的承诺。（看下面的例子）

jest.mock("../api/users", () => ({ getUsers: jest.fn(() => Promise.resolve(users)) }));

如今，更好的方法是使用 msw/node，这是一个 npm 包，可以在您的 React 应用程序测试中模拟服务器。因为它是 react-testing-library 文档推荐的，所以我会使用它，你可以在这里找到所有相关信息：

https://docs.dennisokeeffe.com/mock-service-worker/msw-with-react https://mswjs.io/docs/api/setup-server

通过提交按钮测试 axios 响应数据触发的反应简单方法

React simple way to test axios response data trigger by submit button

testing

reactjs

jestjs

react-testing-library