test: More testing

Author: imp-dance

src/types.ts

@@ -26,8 +26,8 @@ export type UseQueryResult<T> = {
 export type MakeDataRequired<
   T extends readonly UseQueryResult<unknown>[]
 > = {
-  // @ts-ignore: Cannot use data to index type T[K]
-  [K in keyof T]-?: T[K] & { data: NonNullable<T[K]["data"]> };
+  // @ts-ignore: TS2536: Type '"data"' cannot be used to index type 'T[K]'.
+  [K in keyof T]: T[K] & { data: NonNullable<T[K]["data"]> };
 };
 
 export type LoaderTransformFunction<

testing-app/src/mocks.ts

@@ -20,6 +20,9 @@ export const handlers = [
     );
   }),
   rest.get("/pokemon/:name", (req, res, c) => {
+    if (req.params.name === "error") {
+      return res(c.delay(RESPONSE_DELAY), c.status(500));
+    }
     return res(
       c.delay(RESPONSE_DELAY),
       c.status(200),

testing-app/src/testComponents.tsx

@@ -58,6 +58,29 @@ export const ExtendedLoaderComponent = withLoader(
   extendedLoader
 );
 
+const pokemonByNameLoader = createLoader({
+  queries: (name: string) =>
+    [useGetPokemonByNameQuery(name)] as const,
+  queriesArg: (props: { name: string }) => props.name,
+});
+
+export const LoadPokemon = withLoader((props, loaderData) => {
+  return (
+    <div>
+      Loaded: "{loaderData[0].data.name}", props: "{props.name}"
+    </div>
+  );
+}, pokemonByNameLoader);
+
+export const FailTester = withLoader(
+  () => <div>Success</div>,
+  createLoader({
+    queries: () => [useGetPokemonByNameQuery("error")] as const,
+    onError: () => <div>Error</div>,
+    onLoading: () => <div>Loading</div>,
+  })
+);
+
 export const TestAggregateComponent = () => {
   const q1 = useGetPokemonByNameQuery("charizard");
   const q2 = useGetPokemonsQuery(undefined);

testing-app/src/tests.test.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   ExtendedLoaderComponent,
+  FailTester,
+  LoadPokemon,
   SimpleLoadedComponent,
   TestAggregateComponent,
 } from "./testComponents";
@@ -26,6 +28,25 @@ describe("withLoader", () => {
     expect(screen.getByText("pikachu")).toBeVisible();
   });
 
+  test("Loader passes props through queriesArg to queries", async () => {
+    render(<LoadPokemon name="charizard" />);
+    await waitFor(() =>
+      expect(
+        screen.getByText(
+          'Loaded: "charizard", props: "charizard"'
+        )
+      ).toBeVisible()
+    );
+  });
+
+  test("onError renders when applicable", async () => {
+    render(<FailTester />);
+    expect(screen.getByText("Loading")).toBeVisible();
+    await waitFor(() =>
+      expect(screen.getByText("Error")).toBeVisible()
+    );
+  });
+
   describe(".extend()", () => {
     test("Can extend onLoading", async () => {
       render(<ExtendedLoaderComponent />);