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

Posted 2023-02-21

【中文标题】通过提交按钮测试axios响应数据触发器的简单方法

【英文标题】：React simple way to test axios response data trigger by submit button

【发布时间】：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 代码放在一个单独的文件/模块中，并将其导入上面的代码中，然后从提交处理程序中调用它。然后，您可以很容易地测试单独的文件/模块。

【参考方案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()
)