Write useQuery tests

Author: kerwanp

packages/openapi-react-query/biome.json

@@ -2,8 +2,7 @@
   "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
   "extends": ["../../biome.json"],
   "files": {
-    "include": ["./src/", "./test/"],
-    "ignore": ["**/fixtures/**/*"]
+    "ignore": ["./test/fixtures/"]
   },
   "linter": {
     "rules": {

packages/openapi-react-query/test/index.test.tsx

@@ -7,6 +7,18 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { type ReactNode } from "react";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
 beforeAll(() => {
   server.listen({
     onUnhandledRequest: (request) => {
@@ -15,16 +27,13 @@ beforeAll(() => {
   });
 });
 
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+  server.resetHandlers();
+  queryClient.removeQueries();
+});
 
 afterAll(() => server.close());
 
-const queryClient = new QueryClient();
-
-const wrapper = ({ children }: { children: ReactNode }) => (
-  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-);
-
 describe("client", () => {
   it("generates all proper functions", () => {
     const fetchClient = createFetchClient<paths>({ baseUrl });
@@ -35,25 +44,90 @@ describe("client", () => {
   });
 
   describe("useQuery", () => {
-    it("should work", async () => {
+    it("should resolve data properly and have error as null when successfull request", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl });
       const client = createClient(fetchClient);
 
       useMockRequestHandler({
         baseUrl,
         method: "get",
-        path: "/self",
+        path: "/string-array",
         status: 200,
-        body: { message: "OK" },
+        body: ["one", "two", "three"],
       });
 
-      const { result } = renderHook(() => client.useQuery("get", "/self"), {
+      const { result } = renderHook(() => client.useQuery("get", "/string-array"), {
         wrapper,
       });
 
-      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
 
-      expect(result.current.data).toEqual({ message: "OK" });
+      const { data, error } = result.current;
+
+      // … is initially possibly undefined
+      // @ts-expect-error
+      expect(data[0]).toBe("one");
+      expect(error).toBeNull();
+    });
+
+    it("should resolve error properlly and have undefined data when failed request", async () => {
+      const fetchClient = createFetchClient<paths>({ baseUrl });
+      const client = createClient(fetchClient);
+
+      useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/string-array",
+        status: 500,
+        body: { code: 500, message: "Something went wrong" },
+      });
+
+      const { result } = renderHook(() => client.useQuery("get", "/string-array"), {
+        wrapper,
+      });
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      const { data, error } = result.current;
+
+      expect(error?.message).toBe("Something went wrong");
+      expect(data).toBeUndefined();
+    });
+
+    it("should infer correct data and error type", async () => {
+      const fetchClient = createFetchClient<paths>({ baseUrl });
+      const client = createClient(fetchClient);
+
+      const { result } = renderHook(() => client.useQuery("get", "/string-array"), {
+        wrapper,
+      });
+
+      const { data, error } = result.current;
+
+      expectTypeOf(data).toEqualTypeOf<string[] | undefined>();
+      expectTypeOf(error).toEqualTypeOf<{ code: number; message: string } | null>();
+    });
+
+    describe("params", () => {
+      it("typechecks", async () => {
+        const fetchClient = createFetchClient<paths>({ baseUrl });
+        const client = createClient(fetchClient);
+
+        useMockRequestHandler({
+          baseUrl,
+          method: "get",
+          path: "/blogposts/:post_id",
+          status: 200,
+          body: { message: "OK" },
+        });
+
+        // expect error on missing 'params'
+        // @ts-expect-error
+        const { result } = renderHook(() => client.useQuery("get", "/blogposts/{post_id}"), {
+          wrapper,
+        });
+        await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      });
     });
   });