3

我有一个测试，如果/endpoint1失败，应该显示一条错误消息。测试通过了，但是我从 React 测试库中得到以下错误：

Warning: An update to HomePage inside a test was not wrapped in act(...).

为了清楚起见，这里是狙击手。您可以看到我正在使用SWR发送请求。我正在使用Mock Service Worker 模拟请求。

export default function App() {
  const { data: data1, error: error1 } = useSwr("/endpoint1")
  const { data: data2, error: error2 } = useSwr("/endpoint2")

  if (error1 || error2) {
    return <Error />
  }

  return <Success />
}

存在错误是因为/endpoint2在 之后解决/endpoint1，导致组件重新呈现。我相信一旦第一个错误取消第二个请求会起作用。useSwr()我对使用的函数做了一个包装器AbortController()并暴露了一个cancel()函数，但是这个代码段会出现同样的错误：

export default function App() {
  const { data: data1, error: error1, cancel: cancel1 } = useCancellableSwr(
    "/endpoint1"
  )
  const { data: data2, error: error2, cancel: cancel2 } = useCancellableSwr(
    "/endpoint2"
  )

  if (error1 || error2) {
    if (!data1 || !error1) cancel2()
    if (!data2 || !error2) cancel1()
    return <p>Error</p>
  }

  return <p>Success</p>
}

出于某种原因，即使取消了一个端点，它仍然会解析并导致重新渲染。我在这里错过了什么吗？谢谢

编辑：

这是失败的测试：

  test("An error shows if unable to fetch /endpoint1", async () => {
    mockServer.use(
      rest.get("/endpoint1", (_, res, ctx) => res(ctx.status(500)))
    )

    mockServer.use(
      rest.get("/endpoint2", (_, res, ctx) => res(ctx.status(200)))
    )

    render(<App />)

    const error = await screen.findByText("Error")
    expect(error).toBeInTheDocument()
  })

还有我的自定义提取器功能：

async function serverFetch(endpoint) {
  const response = await fetch("http://localhost:8080" + endpoint)
  
  const body = response.json()

  if (!response.ok) {
    throw  new Error("An error occurred while fetching the data.")
  }

  return body
}
4

0 回答 0