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

【问题标题】：React simple way to test axios response data trigger by submit button通过提交按钮测试axios响应数据触发器的简单方法
【发布时间】：2022-01-24 01:08:39
【问题描述】：

有没有简单的方法可以通过提交按钮测试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

【问题讨论】：

将 axios 代码放在一个单独的文件/模块中，并将其导入上面的代码中，然后从提交处理程序中调用它。然后，您可以很容易地测试单独的文件/模块。

标签： reactjs testing jestjs react-testing-library

【解决方案1】：

我将尝试详细解释它，以便您更快地了解这个想法，并且对您来说似乎不再复杂。要测试你的 API 服务与 ReactApp 的交互，你应该模拟 API 服务方法/承诺交互的不同情况，所以它要么是成功的，有一些数据，要么是失败的，要么是挂起的。

在过去漫长的日子里，我们创建了一个假客户端，我们在其中伪造调用并返回模拟数据，类似于处理真实调用时 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

【讨论】：

【解决方案2】：

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

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

您应该可以将您的网址替换为以下/greetings

当您的 api 返回 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()
})

【讨论】：