MSW 单元测试 API 成功并成功错误场景

Question

我正在使用 MSW 进行本地开发和单元测试。

#API fetch
const { loading, error, data } = useFetch('https://made.up/api/usage')

#handler.js
import { rest } from 'msw'

export const handlers = [
  rest.get('https://made.up/api/usage', (req, res, ctx) => {
    return res(
      ctx.status(301),
      ctx.json({
        id: 1,
        firstName: 'John',
      }),
    )
  }),
]

#server.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

#setupTests.js
beforeAll(() => {
    server.listen({
      onUnhandledRequest: 'warn',
    })
  })

  afterEach(() => {
    server.resetHandlers()
  })

  afterAll(() => {
    server.close()
  })

#App.test.js
import React from "react";
import { rest } from "msw";
import { render, screen } from "@testing-library/react";
import { server } from "../src/mocks/server";

import App from "../src/App";

test("passes", async () => {
  render(<App />);

  expect(
    // Expect the mocked response to be present in the DOM.
    await screen.findByText(`{"id":1,"firstName":"John"}`)
  ).toBeInTheDocument();
});

test("error", async () => {
  server.use(
    rest.get("https://made.up/api/usage", (req, res, ctx) => {
      return res(
        ctx.status(500),
        ctx.json({
          error: "error"
        })
      );
    })
  );
  render(<App />);

  expect(
    // Expect the mocked error response to be present in the DOM.
    await screen.findByText("Error: error}")
  ).toBeInTheDocument();
});

我正在重写 API 处理程序来测试错误场景。当一起运行时，这两个测试都不会通过。如果我单独运行它们，它们工作得很好。

我错过了什么步骤吗？或者我们可以使用 MSW 以其他方式测试相同的 API 的不同响应？

Answer 1

我已经解决了这个问题。

server.use(
    rest.get("https://made.up/api/usage", (req, res, ctx) => {
      return res(
        ctx.status(500),
        ctx.json({
          error: "error"
        })
      );
    })
  );

上面的代码永久覆盖 API 处理程序。如果我们想一次性覆盖，由于

server.use(
    rest.get("https://made.up/api/usage", (req, res, ctx) => {
      return res.once(
        ctx.status(500),
        ctx.json({
          error: "error"
        })
      );
    })
  );

这个原因，我的测试没有一起运行，但单独运行时工作正常。