chore: tests for useQuery, useInfiniteQuery, useIsFetching, useQueryClient

Author: DamianOsipiuk

tests/useInfiniteQuery.test.ts

@@ -0,0 +1,65 @@
+import { QueryClient, setLogger } from "react-query/core";
+import { useInfiniteQuery } from "../src/useInfiniteQuery";
+import { noop, infiniteFetcher, flushPromises } from "./utils";
+
+jest.mock("vue", () => {
+  const vue = jest.requireActual("vue");
+  return {
+    ...vue,
+    onUnmounted: jest.fn(),
+  };
+});
+
+jest.mock("../src/useQueryClient", () => {
+  const queryClient = new QueryClient();
+  return {
+    useQueryClient: jest.fn(() => queryClient),
+  };
+});
+
+jest.mock("../src/useBaseQuery", () => {
+  const { useBaseQuery: originImpl } = jest.requireActual(
+    "../src/useBaseQuery"
+  );
+  return {
+    useBaseQuery: jest.fn(originImpl),
+  };
+});
+
+describe("useQuery", () => {
+  beforeAll(() => {
+    setLogger({ log: noop, warn: noop, error: noop });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should properly execute infinite query", async () => {
+    const { data, fetchNextPage, status } = useInfiniteQuery(
+      "infiniteQuery",
+      infiniteFetcher
+    );
+
+    expect(data.value).toStrictEqual(undefined);
+    expect(status.value).toStrictEqual("loading");
+
+    await flushPromises();
+
+    expect(data.value).toStrictEqual({
+      pageParams: [undefined],
+      pages: ["data on page 0"],
+    });
+    expect(status.value).toStrictEqual("success");
+
+    fetchNextPage.value({ pageParam: 12 });
+
+    await flushPromises();
+
+    expect(data.value).toStrictEqual({
+      pageParams: [undefined, 12],
+      pages: ["data on page 0", "data on page 12"],
+    });
+    expect(status.value).toStrictEqual("success");
+  });
+});

tests/useIsFetching.test.ts

@@ -0,0 +1,81 @@
+import { onUnmounted } from "vue";
+import { QueryClient, setLogger } from "react-query/core";
+import { useQuery } from "../src/useQuery";
+import { useIsFetching } from "../src/useIsFetching";
+import { flushPromises, simpleFetcher, noop } from "./utils";
+
+jest.mock("vue", () => {
+  const vue = jest.requireActual("vue");
+  return {
+    ...vue,
+    onUnmounted: jest.fn(),
+  };
+});
+
+jest.mock("../src/useQueryClient", () => {
+  const queryClient = new QueryClient();
+  return {
+    useQueryClient: jest.fn(() => queryClient),
+  };
+});
+
+jest.mock("../src/useBaseQuery", () => {
+  const { useBaseQuery: originImpl } = jest.requireActual(
+    "../src/useBaseQuery"
+  );
+  return {
+    useBaseQuery: jest.fn(originImpl),
+  };
+});
+
+describe("useIsFetching", () => {
+  beforeAll(() => {
+    setLogger({ log: noop, warn: noop, error: noop });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should properly return isFetching state", async () => {
+    const { isFetching: isFetchingQuery } = useQuery(
+      "isFetching1",
+      simpleFetcher
+    );
+    useQuery("isFetching2", simpleFetcher);
+    const isFetching = useIsFetching();
+
+    expect(isFetchingQuery.value).toStrictEqual(true);
+    expect(isFetching.value).toStrictEqual(2);
+
+    await flushPromises();
+
+    expect(isFetchingQuery.value).toStrictEqual(false);
+    expect(isFetching.value).toStrictEqual(0);
+  });
+
+  test("should stop listening to changes on onUnmount", async () => {
+    const onUnmountedMock = onUnmounted as jest.MockedFunction<
+      typeof onUnmounted
+    >;
+    onUnmountedMock.mockImplementation((fn) => fn());
+
+    const { status } = useQuery("onUnmounted", simpleFetcher);
+    const isFetching = useIsFetching();
+
+    expect(status.value).toStrictEqual("loading");
+    expect(isFetching.value).toStrictEqual(1);
+
+    await flushPromises();
+
+    expect(status.value).toStrictEqual("loading");
+    expect(isFetching.value).toStrictEqual(1);
+
+    await flushPromises();
+
+    expect(status.value).toStrictEqual("loading");
+    expect(isFetching.value).toStrictEqual(1);
+
+    onUnmountedMock.mockReset();
+  });
+});

tests/useBaseQuery.test.ts renamed to tests/useQuery.test.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, reactive, ref, onUnmounted } from "vue";
 import { QueryClient, QueryObserver, setLogger } from "react-query/core";
 import { useQuery } from "../src/useQuery";
 import { useBaseQuery } from "../src/useBaseQuery";
@@ -8,7 +8,7 @@ jest.mock("vue", () => {
   const vue = jest.requireActual("vue");
   return {
     ...vue,
-    onUnmounted: jest.fn((fn) => setTimeout(fn, 0)),
+    onUnmounted: jest.fn(),
   };
 });
 
@@ -33,7 +33,7 @@ describe("useQuery", () => {
     setLogger({ log: noop, warn: noop, error: noop });
   });
 
-  afterEach(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
   });
 
@@ -170,4 +170,49 @@ describe("useQuery", () => {
 
     expect(spy).toBeCalledTimes(1);
   });
+
+  test("should properly execute dependant queries", async () => {
+    const { data } = useQuery("dependant1", simpleFetcher);
+
+    const enabled = computed(() => !!data.value);
+
+    const { status } = useQuery(
+      reactive({
+        queryKey: "dependant2",
+        queryFn: simpleFetcher,
+        enabled,
+      })
+    );
+
+    expect(data.value).toStrictEqual(undefined);
+    expect(status.value).toStrictEqual("idle");
+
+    await flushPromises();
+
+    expect(data.value).toStrictEqual("Some data");
+    expect(status.value).toStrictEqual("loading");
+
+    await flushPromises();
+
+    expect(status.value).toStrictEqual("success");
+  });
+
+  test("should stop listening to changes on onUnmount", async () => {
+    const onUnmountedMock = onUnmounted as jest.MockedFunction<
+      typeof onUnmounted
+    >;
+    onUnmountedMock.mockImplementationOnce((fn) => fn());
+
+    const { status } = useQuery("onUnmounted", simpleFetcher);
+
+    expect(status.value).toStrictEqual("loading");
+
+    await flushPromises();
+
+    expect(status.value).toStrictEqual("loading");
+
+    await flushPromises();
+
+    expect(status.value).toStrictEqual("loading");
+  });
 });

tests/useQueryClient.test.ts

@@ -0,0 +1,33 @@
+import * as vue from "vue";
+import { useQueryClient, VUE_REACT_QUERY_CLIENT } from "../src/useQueryClient";
+
+describe("useQueryClient", () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test("should return queryClient when it is provided in the context", () => {
+    const queryClientMock = { name: "Mocked client" };
+    const injectSpy = jest
+      .spyOn(vue, "inject")
+      .mockReturnValue(queryClientMock);
+
+    const queryClient = useQueryClient();
+
+    expect(queryClient).toStrictEqual(queryClientMock);
+    expect(injectSpy).toHaveBeenCalledTimes(1);
+    expect(injectSpy).toHaveBeenCalledWith(VUE_REACT_QUERY_CLIENT);
+  });
+
+  test("should throw an error when queryClient does not exist in the context", () => {
+    const injectSpy = jest.spyOn(vue, "inject").mockReturnValue(undefined);
+
+    expect(useQueryClient).toThrowError(
+      Error(
+        "No queryClient found in Vue context, use 'app.provide(VUE_REACT_QUERY_CLIENT, new QueryClient());' to set one in root component."
+      )
+    );
+    expect(injectSpy).toHaveBeenCalledTimes(1);
+    expect(injectSpy).toHaveBeenCalledWith(VUE_REACT_QUERY_CLIENT);
+  });
+});

tests/utils.ts

@@ -12,6 +12,18 @@ export function simpleFetcher(): Promise<string> {
   });
 }
 
+export function infiniteFetcher({
+  pageParam = 0,
+}: {
+  pageParam?: number;
+}): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      return resolve("data on page " + pageParam);
+    }, 0);
+  });
+}
+
 export function rejectFetcher(): Promise<Error> {
   return new Promise((resolve, reject) => {
     setTimeout(() => {