React-Query 로직 테스트 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

"use client";
import Image from "next/image";

import photoQuery from "@/apis/query/photos.query";

const PhotoItem = ({ photo }: { photo: Photo }) => {
  return (
    <div data-testid="photo">
      <Image src={photo.download_url} alt={photo.url} width={300} height={300} />
      <span>{photo.author}</span>
    </div>
  );
};

const Photos = () => {
  const { data: photos } = photoQuery.getRandomPhotosQuery();

  return (
    <div className="max-w-3xl grid grid-cols-3 gap-3">
      {photos?.map((photo) => (
        <PhotoItem key={photo.id} photo={photo} />
      ))}
    </div>
  );
};

export default Photos;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// photos.api.ts
import { setSearchParams } from "@/utils/setSearchParams";

const baseUrl = "https://picsum.photos/v2";

const getRandomPhotos = async (page: string = "1", limit: string = "10"): Promise<Photo[]> => {
  const params = { page, limit };
  const url = setSearchParams(`${baseUrl}/list`, params);

  const response = await fetch(url);
  return response.json();
};

export default {
  getRandomPhotos,
};

// photos.query.ts
import { UseQueryResult, useQuery } from "react-query";
import photoApi from "../photos.api";

const getRandomPhotosQuery = (page: string = "1", limit: string = "10"): UseQueryResult<Photo[]> => {
  return useQuery({
    queryKey: ["photos", page, limit],
    queryFn: async () => photoApi.getRandomPhotos(),
    refetchOnWindowFocus: true,
  });
};

export default { getRandomPhotosQuery };

1
2
3
4
5
6
7
8
9
10
11

const renderProviderComponent = ({
  children,
  client,
}: {
  children: JSX.Element;
  client?: QueryClient;
}): React.ReactElement => {
	return (
		<QueryClientProvider client={client ?? new QueryClient()}>{children}</QueryClientProvider>
	)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const mockData = [
  {
    id: "0",
    author: "Alejandro Escamilla",
    width: 5000,
    height: 3333,
    url: "https://unsplash.com/photos/yC-Yzbqy7PY",
    download_url: "https://picsum.photos/id/0/5000/3333",
  },
	...생략
  {
    id: "9",
    author: "Alejandro Escamilla",
    width: 5000,
    height: 3269,
    url: "https://unsplash.com/photos/ABDTiLqDhJA",
    download_url: "https://picsum.photos/id/9/5000/3269",
  },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

describe("<Home /> 테스트", () => {
	// Test1
  it("타이틀 테스트", () => {
    const { getByRole } = render(renderProviderComponent({ children: <Home /> }));

    const title = getByRole("heading", {
      level: 2,
    });

    expect(title).toHaveTextContent("랜덤 사진");
  });
	// Test2
  it("로딩 상태 확인", () => {
    photoQuery.getRandomPhotosQuery = jest.fn().mockReturnValue({
      isLoading: true,
    });

    const client = new QueryClient();

    const { getByText } = render(renderProviderComponent({ children: <Home />, client }));

    expect(getByText("loading")).toBeInTheDocument();
  });
	// Test3
  it("10개가 맞는지.", () => {
    photoQuery.getRandomPhotosQuery = jest.fn().mockReturnValue({
      data: mockData,
    });

    const client = new QueryClient();

    const { getAllByTestId } = render(renderProviderComponent({ children: <Home />, client }));

    expect(getAllByTestId("photo")).toHaveLength(mockData.length);
  });
});