React通過提交按鈕測驗axios回應資料觸發器的簡單方法

有沒有一種簡單的方法可以通過提交按鈕測驗 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

uj5u.com熱心網友回復：

我將嘗試詳細解釋它，以便您更快地了解這個想法，并且對您來說似乎不再復雜。為了測驗你的 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

uj5u.com熱心網友回復：

這是一個直接來自 react-testing-library 檔案的示例，我認為您可以很容易地使用上面的代碼示例重新實作它。（查看下面的鏈接了解更多詳情！）

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

您應該可以用以下內容替換您的網址 /greetings

當您的 api 回傳 200 時，您需要做一些事情，也許只是像下面示例中的警報可能是一個好的開始？除非你剛剛清除了我們在這里查看的結果。

如果您的 onSubmit 是觸發器，您也應該可以使用screen.getByTestId代替screen.getByText.

react-testing-library 有一些很棒的檔案，你也可以加入一個不和諧的社區！希望這會有所幫助。祝你好運！

// __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()
})

標籤：反应 测试 玩笑 反应测试库

上一篇：帶有指向介面模擬錯誤的指標的結構

下一篇：帶有存盤在屬性檔案中的查詢的測驗Dao層