Getting msw's server.use() to work with refactored mock server

Question

In trying to test my App component, I refactored the mock server into a separate file. However server.use() is no longer working.

The tests that use server.use() keep failing and throwing the error "TypeError: Cannot read properties of undefined (reading 'use')".

Could this mean there's also an issue with server.use() not being imported/available?

App.test.js

import { screen, waitFor } from "@testing-library/react";
import user from "@testing-library/user-event";
import { rest } from "msw";
import { renderWithProviders } from "../utils/utils-for-tests";
import { createServer } from "./server";
import App from "../App";

jest.mock("../components/BirdImg", () => {
  return () => {
    return "Bird Img Component";
  };
});

const modalContainerMock = document.createElement("div");
modalContainerMock.setAttribute("class", "modal-container");
document.body.appendChild(modalContainerMock);

createServer([
  {
    path: "http://localhost:3005/birds",
    method: "get",
    res: () => {
      return [
        { id: "1", name: "blue tit", number: "5" },
        { id: "2", name: "grey heron", number: "1" },
      ];
    },
  },
  {
    path: "http://localhost:3005/birds",
    method: "post",
    res: () => {
      return { id: "3", name: "robin", number: "2" };
    },
  },
]);

describe("App", () => {
  test("displays the App's heading", async () => {
    renderWithProviders(<App />);
    await screen.findAllByTestId("bird");

    const heading = screen.getByRole("heading", { name: /bird search/i });

    expect(heading).toBeInTheDocument();
  });

  describe("Bird List", () => {
    test("should fetch, load and display birdList", async () => {
      renderWithProviders(<App />);

      const loader = screen.queryByTestId("loader");

      expect(loader).toBeInTheDocument();

      const birdList = await screen.findAllByTestId("bird");

      expect(birdList).toHaveLength(2);
      expect(loader).not.toBeInTheDocument();
    });

    test("adds new bird on submit", async () => {
      renderWithProviders(<App />);

      const loader = screen.queryByTestId(/button loader/i);
      const birdInput = screen.getByRole("textbox", { name: /bird/i });
      const numberInput = screen.getByRole("spinbutton", {
        name: /number/i,
      });
      const button = screen.getByRole("button", { name: /add/i });

      await screen.findAllByTestId("bird");

      user.click(birdInput);
      user.keyboard("robin");
      user.click(numberInput);
      user.keyboard("2");
      user.click(button);

      expect(await screen.findByTestId("button-loader")).toBeInTheDocument();

      server.use(
        rest.get("http://localhost:3005/birds", (req, res, ctx) => {
          return res(
            ctx.json([
              { id: "1", name: "blue tit", number: "5" },
              { id: "2", name: "grey heron", number: "1" },
              { id: "3", name: "robin", number: "2" },
            ])
          );
        })
      );

      expect(loader).not.toBeInTheDocument();
      expect(await screen.findByRole("spinbutton")).toHaveValue(null);
      expect(await screen.findByRole("textbox")).toHaveValue("");

      expect(await screen.findByText(/robin/i)).toBeInTheDocument();
      expect(await screen.findByText(/2/i)).toBeInTheDocument();
    });
  });

server.js

import { setupServer } from "msw/node";
import { rest } from "msw";

export function createServer(handlerConfig) {
  const handlers = handlerConfig.map((config) => {
    return rest[config.method || "get"](config.path, (req, res, ctx) => {
      return res(ctx.json(config.res(req, res, ctx)));
    });
  });
  const server = setupServer(...handlers);

  beforeAll(() => {
    server.listen();
  });
  afterEach(() => {
    server.resetHandlers();
  });
  afterAll(() => {
    server.close();
  });
}

Getting msw's server.use() to work with refactored mock server

0 Answers0