MSW doesn't work in the project

[orchidenver]

Hello guys! I try to test my weather app with MSW and I'm stuck. Please help me to understand what do I do wrong?

I defined handlers and server, also added beforeAll, afterEach and afterAll in setupTests. I try to test my async API call, but it looks like my app totally ignores my test because received value equals the value I passed in my useEffect in component Form.tsx.

My repo with branch "test"
https://github.com/orchidenver/weather-app-react/tree/test

export default function MainPage() {
  const [selectedCityCurrentWeather, setSelectedCityCurrentWeather] =
    useState<CurrentWeatherType | null>({
      date: "Monday, 24/04/2023",
      city: "Odesa",
      temp: 0,
      weatherDescription: "Clouds",
      humidity: 70,
      windSpeed: 5,
    });
  const [
    selectedCityByUserFiveDaysForecast,
    setSelectedCityByUserFiveDaysForecast,
  ] = useState<CurrentWeatherType[]>([
    {
      date: "Monday, 24/04/2023",
      city: "Odesa",
      temp: 0,
      weatherDescription: "Clouds",
      humidity: 70,
      windSpeed: 5,
    },
  ]);
  const [daysPerViewForecast, setDaysPerViewForecast] = useState<number>(
    ButtonDaysPerViewEnum.TWO
  );
  const theme = useTheme();
  const matchesMobileResolution: boolean = useMediaQuery<string | undefined>(
    theme.breakpoints.up("sm")
  );
  const smallScreen: boolean = useMediaQuery<string | undefined>(
    "@media (max-width: 375px)"
  );

  function daysPerView(e: MouseEvent<HTMLButtonElement>) {
    const textValue: string | null = (e.target as HTMLElement).textContent;
    const daysPerView: number = +textValue!.split(" ")[0];
    setDaysPerViewForecast(daysPerView);
  }

  return (
    <Stack
      component="section"
      direction="column"
      justifyContent={
        matchesMobileResolution ? "space-evenly" : "space-between"
      }
      alignItems="center"
      sx={{
        width: "100",
        height: "100vh",
        backgroundColor: theme.palette.primary.main,
      }}
    >
      <Box
        sx={{
          width: matchesMobileResolution ? "75%" : "100vw",
          height: "70%",
          backgroundColor: "blue",
          borderTopLeftRadius: matchesMobileResolution ? 12 : "none",
          borderTopRightRadius: matchesMobileResolution ? 12 : "none",
          borderBottomLeftRadius: matchesMobileResolution ? 12 : 24,
          borderBottomRightRadius: matchesMobileResolution ? 12 : 24,
          background: `linear-gradient(${
            matchesMobileResolution ? "45deg" : "145deg"
          }, rgba(239,255,253,0) 0%, rgba(239,255,253,1) 100%)`,
          paddingLeft: matchesMobileResolution ? 2 : 0,
          paddingRight: matchesMobileResolution ? 2 : 0,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-around",
        }}
      >
        <Stack
          direction="row"
          justifyContent="center"
          alignItems="center"
          sx={{
            width: "100%",
            height: "15%",
          }}
        >
          <Form
            onWeatherChange={setSelectedCityCurrentWeather}
            onWeatherForecast={setSelectedCityByUserFiveDaysForecast}
          />
        </Stack>
...

My Form Component

export default function Form({
  onWeatherChange,
  onWeatherForecast,
}: FormProps) {
  const [showPopup, setShowPopup] = useState<boolean>(false);
  const [showCitySelection, setShowCitySelection] = useState<boolean>(false);
  const [searchedCitySelection, setSearchedCitySelection] = useState<
    SearchedCityType[]
  >([
    {
      name: "",
      state: "",
      lat: 0,
      lon: 0,
    },
  ]);
  const searchInput = useRef() as MutableRefObject<HTMLInputElement>;
  const theme = useTheme();
  const matchesMobileResolution: boolean = useMediaQuery<string | undefined>(
    theme.breakpoints.up("sm")
  );
  const {
    register,
    reset,
    handleSubmit,
    clearErrors,
    formState: { errors },
  } = useForm<yup.InferType<typeof schema>>({
    mode: "onTouched",
    resolver: yupResolver(schema),
  });

  useEffect(() => {
    onSelectedCityHandler({
      name: "Odesa",
      state: "Ukraine",
      lat: 46.4843023,
      lon: 30.7322878,
    });
  }, []);

  const debounce = () => {
    let timeoutID: ReturnType<typeof setTimeout>;

    return (value: yup.InferType<typeof schema>) => {
      clearTimeout(timeoutID);
      timeoutID = setTimeout(() => {
        if (value?.city && value?.city?.trim() !== "") {
          onChangeHandler(value);
        }
      }, 700);
    };
  };

  const onChangeHandler: SubmitHandler<yup.InferType<typeof schema>> = (
    value
  ) => {
    fetch(
      `http://api.openweathermap.org/geo/1.0/direct?q=${value?.city?.trim()}&limit=5&appid=${
        process.env.REACT_APP_API_KEY
      }`
    )
      .then((response) => response.json())
      .then((response) => {
        const cities = response.map(
          (city: SearchedCityTypeExtended): SearchedCityType => {
            const label = `${city?.name}, ${city?.country}${
              city.state ? ", " + city?.state : ""
            }`;
            return {
              name: label,
              state: city?.state,
              lat: city?.lat,
              lon: city?.lon,
            };
          }
        );
        setSearchedCitySelection(cities);
        setShowCitySelection(true);
        clearErrors("city");
      })
      .catch(() => {
        setShowPopup(true);
      });
  };

  function onCloseHandler() {
    setShowCitySelection(false);
  }

  const onInputChangeHandlerDebounce = useMemo(() => debounce(), []);

  function onFocusHandler() {
    searchInput?.current.blur();
  }

  function fetchCurrentWeatherData(cityData: SearchedCityType) {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${cityData?.lat}&lon=${cityData?.lon}&units=metric&appid=${process.env.REACT_APP_API_KEY}`
    )
      .then((response) => response.json())
      .then((response) => {
        onWeatherChange({
          date: transformDate(new Date()),
          city: cityData?.name.split(",")[0],
          temp: Math.round(response.main.temp),
          weatherDescription: response.weather[0].main,
          humidity: response.main.humidity,
          windSpeed: Math.round(response.wind.speed),
        });
      })
      .catch(() => {
        setShowPopup(true);
      });
  }

  function fetchForecatsForFiveDays(cityData: SearchedCityType) {
    fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${cityData?.lat}&lon=${cityData?.lon}&units=metric&appid=${process.env.REACT_APP_API_KEY}`
    )
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        const forecastId: number = response.city.id;

        const fiveDayForecast: CurrentWeatherType[] = response.list.map(
          (data: WeatherForecast, i: number) => {
            return {
              id: forecastId + i,
              date: data.dt,
              city: cityData?.name.split(",")[0],
              temp: Math.round(data.main.temp),
              weatherDescription: data.weather[0].main,
              humidity: data.main.humidity,
              windSpeed: Math.round(data.wind.speed),
            };
          }
        );
        onWeatherForecast(fiveDayForecast);
      })
      .catch(() => {
        setShowPopup(true);
      });
  }

  function onSelectedCityHandler(cityData: SearchedCityType) {
    setShowCitySelection(false);

    fetchCurrentWeatherData(cityData);
    fetchForecatsForFiveDays(cityData);

    setSearchedCitySelection([
      {
        name: "",
        state: "",
        lat: 0,
        lon: 0,
      },
    ]);
    reset({
      city: "",
    });
    clearErrors("city");
    onFocusHandler();
  }

  const onClosePopupHandle = () => {
    setShowPopup(false);
  };
...

My App.test.tsx:

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import App from "./App";

jest.mock("swiper/react", () => ({
  Swiper: ({ children }: any) => (
    <div data-testid="Swiper-testId">{children}</div>
  ),
  SwiperSlide: ({ children }: any) => (
    <div data-testid="SwiperSlide-testId">{children}</div>
  ),
}));

jest.mock("swiper", () => ({
  Mousewheel: (props: any) => null,
}));

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/2 days/i);
  expect(linkElement).toBeInTheDocument();
});

describe("App", () => {
  test("App renders current weather on first API call in useEffect (on success)", async () => {
    render(<App />);

    const ciyName = await screen.findByRole("heading");
    expect(ciyName).toBeInTheDocument();
    expect(ciyName.textContent).toBe("Lviv");
  });
});

My handlers:

const cities: SearchedCityTypeExtended[] = [
  {
    country: "UA",
    lat: 49.841952,
    local_names: { ar: "لفيف", be: "Львоў", ca: "Lviv" },
    lon: 24.0315921,
    name: "Lviv",
    state: "Lviv Oblast",
  },
  {
    country: "UA",
    lat: 47.861591,
    local_names: { ru: "Львов", uk: "Львів", en: "Lviv" },
    lon: 33.551559,
    name: "Lviv",
    state: "Dnipropetrovsk Oblast",
  },
  {
    country: "UA",
    lat: 47.8922869,
    local_names: { ru: "Львов", uk: "Львів", en: "Lviv" },
    lon: 31.091311,
    name: "Lviv",
    state: "Mykolaiv Oblast",
  },
];

const currentWeatherData = {
  coord: { lon: 30.7326, lat: 46.4775 },
  weather: [{ id: 500, main: "Rain", description: "light rain", icon: "10d" }],
  base: "stations",
  main: {
    temp: 11.2,
    feels_like: 10.15,
    temp_min: 11.2,
    temp_max: 11.2,
    pressure: 1023,
    humidity: 68,
    sea_level: 1023,
    grnd_level: 1016,
  },
  visibility: 10000,
  wind: { speed: 1.72, deg: 50, gust: 2.72 },
  rain: { "1h": 0.35 },
  clouds: { all: 95 },
  dt: 1683651206,
  sys: { country: "UA", sunrise: 1683599510, sunset: 1683652515 },
  timezone: 10800,
  id: 698740,
  name: "Lviv",
  cod: 200,
};

export const handlers = [
  rest.get(
    `http://api.openweathermap.org/geo/1.0/direct?q=lviv&limit=5&appid=${process.env.REACT_APP_API_KEY}`,
    (req, res, ctx) => {
      return res(ctx.status(200), ctx.json(cities));
    }
  ),

  rest.get(
    `https://api.openweathermap.org/data/2.5/weather?lat=46.4775&lon=30.73268&units=metric&appid=${process.env.REACT_APP_API_KEY}`,
    (req, res, ctx) => {
      return res(ctx.status(200), ctx.json(currentWeatherData));
    }
  ),
];

[Oleksandrrd]

whooh i dont know

[kettanaito]

Hi, @orchidenver. I looked at the repo you linked, here's my feedback.

Resolve test setup errors

I've noticed you get quite a number of errors while running tests. Mainly this:

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

These usually point at incorrectly constructed tests in regards to how you render React. Please research those online and resolve them. Having them may affect how your components are rendered, also affecting whether they make requests as you expect.

Cover unhandled endpoints

MSW communicates to you that you have requests to endpoints you don't have covered with request handlers:

Found an unhandled GET request to https://api.openweathermap.org/data/2.5/forecast?lat=46.4843023&lon=30.7322878&units=metric&appid=undefined

For example, you make the request above in Form.tsx@178. You've configured onUnhandledRequest to error on unhandled requests, and so it does, letting you know about them.

Please add request handlers for those requests to have your components working correctly (receiving the responses they expect).

Follow MSW suggestions

MSW also prints a warning that you're including query parameters in the request handlers' URLs:

[MSW] Found a redundant usage of query parameters in the request handler URL for "GET https://api.openweathermap.org/data/2.5/weather?lat=46.4775&lon=30.73268&units=metric&appid=undefined". Please match against a path instead and access query parameters in the response resolver function using "req.url.searchParams".

That doesn't really affect how MSW works because it strips them away before performing request matching. Please follow the instructions and remove query parameters from the request handlers' URLs. The instructions also mention how to access those query parameters in the handler if you need to.

You can learn more about working with Query parameters in the documentation.

I believe once you address all these points, your tests should pass.