[testing]ChatGPT와 테스트코드test code

샘플 코드

import { GetStaticProps } from "next";
import {
	addApolloStateAndReturnPageProps,
	initializeApollo,
} from "@/lib/apolloClient";
import { gql } from "@apollo/client";
import { Country } from "@/types";

const GET_COUNTRIES = gql`
	query Countries {
		countries {
			code
			name
			emoji
		}
	}
`;

  

interface Props {
	countries: Country[];
}

const FetchSample = ({ countries }: Props) => {

	return (
		<div className="grid grid-cols-5 gap-8 p-10">
		{countries.map((country) => {
			const { code, name, emoji } = country;
			return (
				<div
				key={code as string}
				className="w-auto p-4 shadow-md h-25 hover:bg-slate-100">		
				<div>{emoji}</div>
				<div className="text-sm">{name}</div>
				</div>
			);
		})}
		</div>
	);
};

export const getStaticProps: GetStaticProps = async (ctx) => {
const apolloClient = initializeApollo();
const {
	data: { countries },
} = await apolloClient.query({
	query: GET_COUNTRIES,
});

return addApolloStateAndReturnPageProps(apolloClient, {
	props: { countries },
	});
};

export default FetchSample;

ChatGPT

Here's an example test code for the given code:

import { MockedProvider } from "@apollo/client/testing";
import { render } from "@testing-library/react";
import { GetStaticPropsContext } from "next";
import FetchSample, { getStaticProps, COUNTRIS_QUERY } from "@/pages/fetchSample";

const mockCountries = [
  { code: "US", name: "United States", emoji: "🇺🇸" },
  { code: "CA", name: "Canada", emoji: "🇨🇦" },
];

const mockContext: GetStaticPropsContext = {};

const mockApolloClient = {
  query: jest.fn().mockResolvedValue({ data: { countries: mockCountries } }),
};

describe("FetchSample", () => {
  it("renders a list of countries", async () => {
    const { getByText } = render(
      <MockedProvider client={mockApolloClient}>
        <FetchSample countries={mockCountries} />
      </MockedProvider>
    );

    mockCountries.forEach((country) => {
      expect(getByText(country.name)).toBeInTheDocument();
    });
  });

  it("fetches countries data with getStaticProps", async () => {
    const { props } = await getStaticProps(mockContext);

    expect(props.countries).toEqual(mockCountries);
    expect(mockApolloClient.query).toHaveBeenCalledWith({
      query: COUNTRIS_QUERY,
    });
  });
});

In this test code, we're using Jest as the test runner and @testing-library/react for rendering and querying the rendered components. We're also using MockedProvider from @apollo/client/testing to mock the Apollo client in our tests.

The first test checks that the FetchSample component renders a list of countries correctly. We're using the render function from @testing-library/react to render the component with the mockCountries data as the countries prop. We're then using the getByText function to check that each country name is present in the rendered output.

The second test checks that the getStaticProps function fetches the countries data correctly. We're mocking the GetStaticPropsContext object with an empty object, and we're also mocking the Apollo client with the mockApolloClient object, which we're setting to return the mockCountries data when the COUNTRIS_QUERY is queried. We're then calling the getStaticProps function with the mocked context, and we're checking that it returns the expected props object with the mockCountries data. We're also checking that the mockApolloClient.query function was called with the COUNTRIS_QUERY.