tkdodo / testing-react-query Goto Github PK

const App = () => {
	const {
		isLoading,
		data,
		error
	} = useFetchAccounts();

	if (isLoading) return "Loading...";

	if (error) return "An error has occurred: " + error;

	return (
		<div>
			{data?.map(item => (
				<div key={item.id}>{item.value}</div>
			))}
		</div>
	);
};

const testQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false
    }
  }
});

testQueryClient.setQueryDefaults(["accounts"], { retry: 5 });

describe("Accounts", () => {
  it("renders accounts", async () => {
    const { result } = renderHook(() => useFetchAccounts(), {
      wrapper: () => (
        <QueryClientProvider client={testQueryClient}>
          <App />
        </QueryClientProvider>
      )
    });

    console.log("result", result);
    await waitFor(() => expect(result.current.isSuccess).toBe(true));
  });
});

import { useQuery } from "@tanstack/react-query";

type FormattedAccount = {
  id: number;
  label: string;
};

const fetchAccount = async () => {
  const res = await fetch("/api/accounts");
  const accounts = await res.json();

  console.log("accounts", accounts);
  const formattedAccounts: FormattedAccount[] = [...accounts]?.map(
    (option) => ({
      id: option.id,
      label: option.name,
    })
  );

  console.log("formattedAccounts", formattedAccounts);
  return formattedAccounts;
};

export const useFetchAccounts = () => {
  return useQuery({
    queryKey: ["accounts"],
    queryFn: () => fetchAccount()
  });
};

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

export const handlers = [
  rest.get("/api/accounts", (req, res, ctx) => {
    const rres = res(ctx.status(200), ctx.json([{ id: 1, name: "Account 1" }]));
    console.log("rres", rres);
    return rres;
  })
];

export const server = setupServer(...handlers);

/** @type {import('ts-jest').JestConfigWithTsJest} */

module.exports = {
  preset: "ts-jest",
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.spec.{ts, tsx}"],
  coverageDirectory: "coverage",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  transform: {
    "^.+\\.(ts|tsx)?$": "ts-jest"
  }
};

import "@testing-library/jest-dom";
import "whatwg-fetch";
import { server } from "./server";

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

export default global.matchMedia =
  global.matchMedia ||
  function (query) {
    return {
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(), // deprecated
      removeListener: jest.fn(), // deprecated
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn()
    };
  };