@sylphx/lens-react 2.0.1 → 2.1.0

package/src/hooks.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Tests for React Hooks (Operations-based API)
+ * Tests for React Hooks (Selector-based API)
  *
  * NOTE: These tests require DOM environment (happy-dom).
  * Run from packages/react directory: cd packages/react && bun test
@@ -12,8 +12,10 @@ import { test as bunTest, describe, expect } from "bun:test";
 
 const test = hasDom ? bunTest : bunTest.skip;
 
-import type { MutationResult, QueryResult } from "@sylphx/lens-client";
+import type { LensClient, MutationResult, QueryResult } from "@sylphx/lens-client";
 import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { LensProvider } from "./context.js";
 import { useLazyQuery, useMutation, useQuery } from "./hooks.js";
 
 // =============================================================================
@@ -88,14 +90,31 @@ function createMockQueryResult<T>(initialValue: T | null = null): QueryResult<T>
 }
 
 // =============================================================================
-// Tests: useQuery
+// Test Wrapper with Mock Client
+// =============================================================================
+
+function createMockClient() {
+	return {} as LensClient<any, any>;
+}
+
+function createWrapper(mockClient: LensClient<any, any>) {
+	return function Wrapper({ children }: { children: ReactNode }) {
+		return <LensProvider client={mockClient}>{children}</LensProvider>;
+	};
+}
+
+// =============================================================================
+// Tests: useQuery (Accessor + Deps pattern)
 // =============================================================================
 
 describe("useQuery", () => {
 	test("returns loading state initially", () => {
+		const mockClient = createMockClient();
 		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		expect(result.current.loading).toBe(true);
 		expect(result.current.data).toBe(null);
@@ -103,9 +122,12 @@ describe("useQuery", () => {
 	});
 
 	test("returns data when query resolves", async () => {
+		const mockClient = createMockClient();
 		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		// Simulate data loading
 		act(() => {
@@ -121,9 +143,12 @@ describe("useQuery", () => {
 	});
 
 	test("returns error when query fails", async () => {
+		const mockClient = createMockClient();
 		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		// Simulate error
 		act(() => {
@@ -139,6 +164,7 @@ describe("useQuery", () => {
 	});
 
 	test("handles non-Error rejection", async () => {
+		const mockClient = createMockClient();
 		const mockQuery = {
 			subscribe: () => () => {},
 			then: (onFulfilled: any, onRejected: any) => {
@@ -147,222 +173,220 @@ describe("useQuery", () => {
 			},
 		} as unknown as QueryResult<{ id: string }>;
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await waitFor(() => {
-			expect(result.current.error?.message).toBe("String error");
+			expect(result.current.loading).toBe(false);
 		});
-	});
 
-	test("skips query when skip option is true", () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
-
-		const { result } = renderHook(() => useQuery(mockQuery, { skip: true }));
-
-		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toBe(null);
+		expect(result.current.error?.message).toBe("String error");
 	});
 
-	test("handles null query", () => {
-		const { result } = renderHook(() => useQuery(null));
-
-		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toBe(null);
-		expect(result.current.error).toBe(null);
-	});
+	test("skips query when skip option is true", () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>();
 
-	test("handles undefined query", () => {
-		const { result } = renderHook(() => useQuery(undefined));
+		const { result } = renderHook(() => useQuery(() => mockQuery, [], { skip: true }), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		expect(result.current.loading).toBe(false);
 		expect(result.current.data).toBe(null);
 		expect(result.current.error).toBe(null);
 	});
 
-	test("handles accessor function returning query", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
-		const accessor = () => mockQuery;
-
-		const { result } = renderHook(() => useQuery(accessor));
+	test("handles null query from accessor", () => {
+		const mockClient = createMockClient();
 
-		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+		const { result } = renderHook(() => useQuery(() => null, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		await waitFor(() => {
-			expect(result.current.data).toEqual({ id: "123", name: "John" });
-		});
-	});
-
-	test("handles accessor function returning null", () => {
-		const accessor = () => null;
-
-		const { result } = renderHook(() => useQuery(accessor));
-
 		expect(result.current.loading).toBe(false);
 		expect(result.current.data).toBe(null);
+		expect(result.current.error).toBe(null);
 	});
 
-	test("handles accessor function returning undefined", () => {
-		const accessor = () => undefined;
+	test("handles undefined query from accessor", () => {
+		const mockClient = createMockClient();
 
-		const { result } = renderHook(() => useQuery(accessor));
+		const { result } = renderHook(() => useQuery(() => undefined, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		expect(result.current.loading).toBe(false);
 		expect(result.current.data).toBe(null);
+		expect(result.current.error).toBe(null);
 	});
 
 	test("updates when query subscription emits", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ count: number }>();
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// First value
+		// Initial value
 		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+			mockQuery._setValue({ count: 1 });
 		});
 
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("John");
+			expect(result.current.data?.count).toBe(1);
 		});
 
 		// Update value via subscription
 		act(() => {
-			mockQuery._setValue({ id: "123", name: "Jane" });
+			mockQuery._setValue({ count: 2 });
 		});
 
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("Jane");
+			expect(result.current.data?.count).toBe(2);
 		});
 	});
 
 	test("refetch reloads the query", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "initial" });
 
-		const { result } = renderHook(() => useQuery(mockQuery));
-
-		// Initial load
-		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("John");
+			expect(result.current.loading).toBe(false);
 		});
 
-		// Refetch should trigger loading state and reload
+		expect(result.current.data?.id).toBe("initial");
+
+		// Refetch
 		act(() => {
 			result.current.refetch();
 		});
 
-		// Note: In this mock, refetch will resolve with the same data
-		// In a real scenario, it would trigger a new network request
+		expect(result.current.loading).toBe(true);
+
 		await waitFor(() => {
 			expect(result.current.loading).toBe(false);
 		});
-
-		expect(result.current.data).toEqual({ id: "123", name: "John" });
 	});
 
 	test("refetch handles errors", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
-
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const mockClient = createMockClient();
+		let shouldFail = false;
+		const mockQuery = {
+			subscribe: () => () => {},
+			then: (onFulfilled: any, onRejected: any) => {
+				if (shouldFail) {
+					return Promise.reject(new Error("Refetch failed")).then(onFulfilled, onRejected);
+				}
+				return Promise.resolve({ id: "test" }).then(onFulfilled, onRejected);
+			},
+		} as unknown as QueryResult<{ id: string }>;
 
-		// Initial load succeeds
-		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("John");
+			expect(result.current.loading).toBe(false);
 		});
 
-		// Create a new query that will fail
-		const failingQuery = {
-			subscribe: () => () => {},
-			then: (onFulfilled: any, onRejected: any) => {
-				return Promise.reject(new Error("Refetch failed")).then(onFulfilled, onRejected);
-			},
-		} as unknown as QueryResult<{ id: string; name: string }>;
+		shouldFail = true;
 
-		// Update the query to use failing query
-		const { result: result2 } = renderHook(() => useQuery(failingQuery));
+		act(() => {
+			result.current.refetch();
+		});
 
 		await waitFor(() => {
-			expect(result2.current.error?.message).toBe("Refetch failed");
+			expect(result.current.loading).toBe(false);
 		});
+
+		expect(result.current.error?.message).toBe("Refetch failed");
 	});
 
-	test("refetch does nothing when query is null", () => {
-		const { result } = renderHook(() => useQuery(null));
+	test("refetch does nothing when query is null", async () => {
+		const mockClient = createMockClient();
+
+		const { result } = renderHook(() => useQuery(() => null, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
+		// Should not throw
 		act(() => {
 			result.current.refetch();
 		});
 
 		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toBe(null);
 	});
 
-	test("refetch does nothing when skip is true", () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+	test("refetch does nothing when skip is true", async () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>();
 
-		const { result } = renderHook(() => useQuery(mockQuery, { skip: true }));
+		const { result } = renderHook(() => useQuery(() => mockQuery, [], { skip: true }), {
+			wrapper: createWrapper(mockClient),
+		});
 
+		// Should not throw
 		act(() => {
 			result.current.refetch();
 		});
 
 		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toBe(null);
 	});
 
 	test("refetch with non-Error rejection", async () => {
-		let shouldFail = false;
+		const mockClient = createMockClient();
+		let callCount = 0;
 		const mockQuery = {
 			subscribe: () => () => {},
 			then: (onFulfilled: any, onRejected: any) => {
-				if (shouldFail) {
-					return Promise.reject("Refetch string error").then(onFulfilled, onRejected);
+				callCount++;
+				if (callCount > 1) {
+					return Promise.reject("String error on refetch").then(onFulfilled, onRejected);
 				}
-				return Promise.resolve({ id: "123", name: "John" } as any).then(onFulfilled, onRejected);
+				return Promise.resolve({ id: "test" }).then(onFulfilled, onRejected);
 			},
-		} as unknown as QueryResult<{ id: string; name: string }>;
+		} as unknown as QueryResult<{ id: string }>;
 
-		const { result } = renderHook(() => useQuery(mockQuery));
+		const { result } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await waitFor(() => {
-			expect(result.current.data).toEqual({ id: "123", name: "John" });
+			expect(result.current.loading).toBe(false);
 		});
 
-		// Make it fail on refetch
-		shouldFail = true;
-
 		act(() => {
 			result.current.refetch();
 		});
 
 		await waitFor(() => {
-			expect(result.current.error?.message).toBe("Refetch string error");
+			expect(result.current.loading).toBe(false);
 		});
+
+		expect(result.current.error?.message).toBe("String error on refetch");
 	});
 
 	test("cleans up subscription on unmount", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
 		let unsubscribeCalled = false;
+		const mockQuery = {
+			subscribe: () => {
+				return () => {
+					unsubscribeCalled = true;
+				};
+			},
+			then: (onFulfilled: any) => Promise.resolve({ id: "test" }).then(onFulfilled),
+		} as unknown as QueryResult<{ id: string }>;
 
-		// Override subscribe to track unsubscribe
-		const originalSubscribe = mockQuery.subscribe;
-		mockQuery.subscribe = (callback?: (data: { id: string; name: string }) => void) => {
-			const originalUnsubscribe = originalSubscribe.call(mockQuery, callback);
-			return () => {
-				unsubscribeCalled = true;
-				originalUnsubscribe();
-			};
-		};
-
-		const { unmount } = renderHook(() => useQuery(mockQuery));
+		const { unmount } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		unmount();
 
@@ -370,99 +394,139 @@ describe("useQuery", () => {
 	});
 
 	test("does not update state after unmount", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>();
 
-		const { unmount } = renderHook(() => useQuery(mockQuery));
+		const { result, unmount } = renderHook(() => useQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// Unmount before query resolves
 		unmount();
 
-		// Try to set value after unmount
+		// This should not cause errors or state updates
 		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+			mockQuery._setValue({ id: "after-unmount" });
 		});
 
-		// State should not be updated (we can't really assert this directly,
-		// but the test passing without errors shows no state update occurred)
-		expect(true).toBe(true);
+		// Result should still be from before unmount
+		expect(result.current.data).toBe(null);
 	});
 
-	test("handles query change", async () => {
-		const mockQuery1 = createMockQueryResult<{ id: string; name: string }>();
-		const mockQuery2 = createMockQueryResult<{ id: string; name: string }>();
-
-		let currentQuery = mockQuery1;
-		const { result, rerender } = renderHook(() => useQuery(currentQuery));
+	test("handles query change via deps", async () => {
+		const mockClient = createMockClient();
+		const mockQuery1 = createMockQueryResult<{ id: string }>({ id: "query1" });
+		const mockQuery2 = createMockQueryResult<{ id: string }>({ id: "query2" });
 
-		// Load first query
-		act(() => {
-			mockQuery1._setValue({ id: "1", name: "First" });
+		let useQuery1 = true;
+		const { result, rerender } = renderHook(() => useQuery(() => (useQuery1 ? mockQuery1 : mockQuery2), [useQuery1]), {
+			wrapper: createWrapper(mockClient),
 		});
 
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("First");
+			expect(result.current.data?.id).toBe("query1");
 		});
 
-		// Change to second query
-		currentQuery = mockQuery2;
+		// Change to query2
+		useQuery1 = false;
 		rerender();
 
-		expect(result.current.loading).toBe(true);
-
-		// Load second query
-		act(() => {
-			mockQuery2._setValue({ id: "2", name: "Second" });
-		});
-
 		await waitFor(() => {
-			expect(result.current.data?.name).toBe("Second");
+			expect(result.current.data?.id).toBe("query2");
 		});
 	});
 
 	test("handles skip option change from true to false", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "test" });
 
 		let skip = true;
-		const { result, rerender } = renderHook(() => useQuery(mockQuery, { skip }));
+		const { result, rerender } = renderHook(() => useQuery(() => mockQuery, [], { skip }), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		expect(result.current.loading).toBe(false);
+		expect(result.current.data).toBe(null);
 
-		// Change skip to false
+		// Enable query
 		skip = false;
 		rerender();
 
-		expect(result.current.loading).toBe(true);
-
-		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
-		});
-
 		await waitFor(() => {
-			expect(result.current.data).toEqual({ id: "123", name: "John" });
+			expect(result.current.data?.id).toBe("test");
 		});
 	});
 
 	test("handles skip option change from false to true", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "test" });
 
 		let skip = false;
-		const { result, rerender } = renderHook(() => useQuery(mockQuery, { skip }));
-
-		act(() => {
-			mockQuery._setValue({ id: "123", name: "John" });
+		const { result, rerender } = renderHook(() => useQuery(() => mockQuery, [], { skip }), {
+			wrapper: createWrapper(mockClient),
 		});
 
 		await waitFor(() => {
-			expect(result.current.data).toEqual({ id: "123", name: "John" });
+			expect(result.current.data?.id).toBe("test");
 		});
 
-		// Change skip to true
+		// Disable query
 		skip = true;
 		rerender();
 
+		await waitFor(() => {
+			expect(result.current.data).toBe(null);
+		});
+
+		expect(result.current.loading).toBe(false);
+	});
+
+	test("select transforms the data", async () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string; name: string }>({
+			id: "123",
+			name: "John",
+		});
+
+		const { result } = renderHook(
+			() =>
+				useQuery(() => mockQuery, [], {
+					select: (data) => data.name.toUpperCase(),
+				}),
+			{ wrapper: createWrapper(mockClient) },
+		);
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		expect(result.current.data).toBe("JOHN");
+	});
+
+	test("Route + Params pattern works", async () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "user-123" });
+		const route = (_params: { id: string }) => mockQuery;
+
+		const { result } = renderHook(() => useQuery(() => route, { id: "123" }), {
+			wrapper: createWrapper(mockClient),
+		});
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		expect(result.current.data?.id).toBe("user-123");
+	});
+
+	test("Route + Params with null route", async () => {
+		const mockClient = createMockClient();
+
+		const { result } = renderHook(() => useQuery(() => null, { id: "123" }), {
+			wrapper: createWrapper(mockClient),
+		});
+
 		expect(result.current.loading).toBe(false);
 		expect(result.current.data).toBe(null);
-		expect(result.current.error).toBe(null);
 	});
 });
 
@@ -472,39 +536,40 @@ describe("useQuery", () => {
 
 describe("useMutation", () => {
 	test("executes mutation and returns result", async () => {
-		const mutationFn = async (input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
-			return {
-				data: { id: "new-id", name: input.name },
-			};
+		const mockClient = createMockClient();
+		const mockMutation = async (_input: { title: string }): Promise<MutationResult<{ id: string }>> => {
+			return { data: { id: "new-123" } };
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
-
-		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toBe(null);
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		let mutationResult: MutationResult<{ id: string; name: string }> | undefined;
+		let mutationResult: MutationResult<{ id: string }> | undefined;
 		await act(async () => {
-			mutationResult = await result.current.mutate({ name: "New User" });
+			mutationResult = await result.current.mutate({ title: "Test" });
 		});
 
-		expect(mutationResult?.data).toEqual({ id: "new-id", name: "New User" });
-		expect(result.current.data).toEqual({ id: "new-id", name: "New User" });
+		expect(mutationResult?.data?.id).toBe("new-123");
+		expect(result.current.data?.id).toBe("new-123");
 		expect(result.current.loading).toBe(false);
 	});
 
 	test("handles mutation error", async () => {
-		const mutationFn = async (_input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
+		const mockClient = createMockClient();
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
 			throw new Error("Mutation failed");
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await act(async () => {
 			try {
-				await result.current.mutate({ name: "New User" });
+				await result.current.mutate({ title: "Test" });
 			} catch {
-				// Expected error
+				// Expected
 			}
 		});
 
@@ -513,46 +578,49 @@ describe("useMutation", () => {
 	});
 
 	test("handles non-Error exception in mutation", async () => {
-		const mutationFn = async (_input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
+		const mockClient = createMockClient();
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
 			throw "String error";
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await act(async () => {
 			try {
-				await result.current.mutate({ name: "New User" });
+				await result.current.mutate({ title: "Test" });
 			} catch {
-				// Expected error
+				// Expected
 			}
 		});
 
 		expect(result.current.error?.message).toBe("String error");
-		expect(result.current.loading).toBe(false);
 	});
 
 	test("shows loading state during mutation", async () => {
-		let resolveMutation: ((value: MutationResult<{ id: string }>) => void) | null = null;
-		const mutationFn = async (_input: { name: string }): Promise<MutationResult<{ id: string }>> => {
-			return new Promise((resolve) => {
-				resolveMutation = resolve;
+		const mockClient = createMockClient();
+		let resolvePromise: () => void;
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
+			await new Promise<void>((resolve) => {
+				resolvePromise = resolve;
 			});
+			return { data: { id: "test" } };
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// Start mutation (don't await)
-		let mutationPromise: Promise<MutationResult<{ id: string }>> | undefined;
+		let mutationPromise: Promise<any>;
 		act(() => {
-			mutationPromise = result.current.mutate({ name: "New User" });
+			mutationPromise = result.current.mutate({ title: "Test" });
 		});
 
-		// Should be loading
 		expect(result.current.loading).toBe(true);
 
-		// Resolve mutation
 		await act(async () => {
-			resolveMutation?.({ data: { id: "new-id" } });
+			resolvePromise!();
 			await mutationPromise;
 		});
 
@@ -560,14 +628,17 @@ describe("useMutation", () => {
 	});
 
 	test("reset clears mutation state", async () => {
-		const mutationFn = async (input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
-			return { data: { id: "new-id", name: input.name } };
+		const mockClient = createMockClient();
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
+			return { data: { id: "test" } };
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await act(async () => {
-			await result.current.mutate({ name: "New User" });
+			await result.current.mutate({ title: "Test" });
 		});
 
 		expect(result.current.data).not.toBe(null);
@@ -582,77 +653,89 @@ describe("useMutation", () => {
 	});
 
 	test("handles multiple mutations in sequence", async () => {
-		let counter = 0;
-		const mutationFn = async (input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
-			counter++;
-			return { data: { id: `id-${counter}`, name: input.name } };
+		const mockClient = createMockClient();
+		let callCount = 0;
+		const mockMutation = async (_input: { title: string }): Promise<MutationResult<{ count: number }>> => {
+			callCount++;
+			return { data: { count: callCount } };
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// First mutation
 		await act(async () => {
-			await result.current.mutate({ name: "First" });
+			await result.current.mutate({ title: "First" });
 		});
+		expect(result.current.data?.count).toBe(1);
 
-		expect(result.current.data).toEqual({ id: "id-1", name: "First" });
-
-		// Second mutation
 		await act(async () => {
-			await result.current.mutate({ name: "Second" });
+			await result.current.mutate({ title: "Second" });
 		});
-
-		expect(result.current.data).toEqual({ id: "id-2", name: "Second" });
+		expect(result.current.data?.count).toBe(2);
 	});
 
 	test("clears error on successful mutation after previous error", async () => {
+		const mockClient = createMockClient();
 		let shouldFail = true;
-		const mutationFn = async (input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
 			if (shouldFail) {
-				throw new Error("Mutation failed");
+				throw new Error("Failed");
 			}
-			return { data: { id: "new-id", name: input.name } };
+			return { data: { id: "success" } };
 		};
 
-		const { result } = renderHook(() => useMutation(mutationFn));
+		const { result } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		// First mutation fails
 		await act(async () => {
 			try {
-				await result.current.mutate({ name: "New User" });
+				await result.current.mutate({ title: "Test" });
 			} catch {
-				// Expected error
+				// Expected
 			}
 		});
 
-		expect(result.current.error?.message).toBe("Mutation failed");
+		expect(result.current.error).not.toBe(null);
 
 		// Second mutation succeeds
 		shouldFail = false;
 		await act(async () => {
-			await result.current.mutate({ name: "New User" });
+			await result.current.mutate({ title: "Test" });
 		});
 
 		expect(result.current.error).toBe(null);
-		expect(result.current.data).toEqual({ id: "new-id", name: "New User" });
+		expect(result.current.data?.id).toBe("success");
 	});
 
 	test("does not update state after unmount", async () => {
-		const mutationFn = async (input: { name: string }): Promise<MutationResult<{ id: string; name: string }>> => {
-			return { data: { id: "new-id", name: input.name } };
+		const mockClient = createMockClient();
+		let resolvePromise: () => void;
+		const mockMutation = async (): Promise<MutationResult<{ id: string }>> => {
+			await new Promise<void>((resolve) => {
+				resolvePromise = resolve;
+			});
+			return { data: { id: "test" } };
 		};
 
-		const { result, unmount } = renderHook(() => useMutation(mutationFn));
+		const { result, unmount } = renderHook(() => useMutation(() => mockMutation), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// Start mutation but unmount before it completes
-		const mutationPromise = result.current.mutate({ name: "New User" });
-		unmount();
+		let mutationPromise: Promise<any>;
+		act(() => {
+			mutationPromise = result.current.mutate({ title: "Test" });
+		});
 
-		// Wait for mutation to complete
-		await mutationPromise;
+		unmount();
 
-		// Test passes if no error is thrown (state update after unmount would cause error)
-		expect(true).toBe(true);
+		// Resolve after unmount - should not cause errors
+		await act(async () => {
+			resolvePromise!();
+			await mutationPromise;
+		});
 	});
 });
 
@@ -662,48 +745,50 @@ describe("useMutation", () => {
 
 describe("useLazyQuery", () => {
 	test("does not execute query on mount", () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>();
 
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		expect(result.current.loading).toBe(false);
 		expect(result.current.data).toBe(null);
 	});
 
 	test("executes query when execute is called", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>({
-			id: "123",
-			name: "John",
-		});
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "lazy-123" });
 
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		let queryResult: { id: string; name: string } | undefined;
 		await act(async () => {
-			queryResult = await result.current.execute();
+			await result.current.execute();
 		});
 
-		expect(queryResult).toEqual({ id: "123", name: "John" });
-		expect(result.current.data).toEqual({ id: "123", name: "John" });
+		expect(result.current.data?.id).toBe("lazy-123");
+		expect(result.current.loading).toBe(false);
 	});
 
 	test("handles query error", async () => {
-		// Create a mock query that rejects
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
-
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		const mockClient = createMockClient();
+		const mockQuery = {
+			then: (_: any, onRejected: any) => {
+				return Promise.reject(new Error("Query failed")).then(null, onRejected);
+			},
+		} as unknown as QueryResult<{ id: string }>;
 
-		// Set error before execute
-		act(() => {
-			mockQuery._setError(new Error("Query failed"));
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		// Execute should throw
 		await act(async () => {
 			try {
 				await result.current.execute();
 			} catch {
-				// Expected error
+				// Expected
 			}
 		});
 
@@ -711,19 +796,22 @@ describe("useLazyQuery", () => {
 	});
 
 	test("handles non-Error rejection", async () => {
+		const mockClient = createMockClient();
 		const mockQuery = {
-			then: (onFulfilled: any, onRejected: any) => {
-				return Promise.reject("String error").then(onFulfilled, onRejected);
+			then: (_: any, onRejected: any) => {
+				return Promise.reject("String error").then(null, onRejected);
 			},
 		} as unknown as QueryResult<{ id: string }>;
 
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await act(async () => {
 			try {
 				await result.current.execute();
 			} catch {
-				// Expected error
+				// Expected
 			}
 		});
 
@@ -731,12 +819,12 @@ describe("useLazyQuery", () => {
 	});
 
 	test("reset clears query state", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>({
-			id: "123",
-			name: "John",
-		});
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "test" });
 
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
 		await act(async () => {
 			await result.current.execute();
@@ -749,190 +837,201 @@ describe("useLazyQuery", () => {
 		});
 
 		expect(result.current.data).toBe(null);
-		expect(result.current.error).toBe(null);
-		expect(result.current.loading).toBe(false);
 	});
 
-	test("handles null query", async () => {
-		const { result } = renderHook(() => useLazyQuery(null));
+	test("handles null query from accessor", async () => {
+		const mockClient = createMockClient();
 
-		let queryResult: any;
-		await act(async () => {
-			queryResult = await result.current.execute();
+		const { result } = renderHook(() => useLazyQuery(() => null, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		expect(queryResult).toBe(null);
-		expect(result.current.data).toBe(null);
-		expect(result.current.loading).toBe(false);
-	});
-
-	test("handles undefined query", async () => {
-		const { result } = renderHook(() => useLazyQuery(undefined));
-
-		let queryResult: any;
+		let executeResult: any;
 		await act(async () => {
-			queryResult = await result.current.execute();
+			executeResult = await result.current.execute();
 		});
 
-		expect(queryResult).toBe(null);
+		expect(executeResult).toBe(null);
 		expect(result.current.data).toBe(null);
-		expect(result.current.loading).toBe(false);
 	});
 
-	test("handles accessor function returning query", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>({
-			id: "123",
-			name: "John",
-		});
-		const accessor = () => mockQuery;
-
-		const { result } = renderHook(() => useLazyQuery(accessor));
+	test("handles undefined query from accessor", async () => {
+		const mockClient = createMockClient();
 
-		let queryResult: { id: string; name: string } | undefined;
-		await act(async () => {
-			queryResult = await result.current.execute();
+		const { result } = renderHook(() => useLazyQuery(() => undefined, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		expect(queryResult).toEqual({ id: "123", name: "John" });
-	});
-
-	test("handles accessor function returning null", async () => {
-		const accessor = () => null;
-
-		const { result } = renderHook(() => useLazyQuery(accessor));
-
-		let queryResult: any;
+		let executeResult: any;
 		await act(async () => {
-			queryResult = await result.current.execute();
+			executeResult = await result.current.execute();
 		});
 
-		expect(queryResult).toBe(null);
+		expect(executeResult).toBe(null);
+		expect(result.current.data).toBe(null);
 	});
 
 	test("uses latest query value from accessor on execute", async () => {
-		let currentValue = "first";
-		const mockQuery1 = createMockQueryResult<string>("first");
-		const mockQuery2 = createMockQueryResult<string>("second");
-
-		const accessor = () => (currentValue === "first" ? mockQuery1 : mockQuery2);
-
-		const { result } = renderHook(() => useLazyQuery(accessor));
+		const mockClient = createMockClient();
+		const mockQuery1 = createMockQueryResult<{ id: string }>({ id: "query1" });
+		const mockQuery2 = createMockQueryResult<{ id: string }>({ id: "query2" });
+
+		let useQuery1 = true;
+		const { result, rerender } = renderHook(
+			() => useLazyQuery(() => (useQuery1 ? mockQuery1 : mockQuery2), [useQuery1]),
+			{ wrapper: createWrapper(mockClient) },
+		);
+
+		// Change to query2 before executing
+		useQuery1 = false;
+		rerender();
 
-		// First execute
-		let queryResult1: string | undefined;
 		await act(async () => {
-			queryResult1 = await result.current.execute();
+			await result.current.execute();
 		});
 
-		expect(queryResult1).toBe("first");
-
-		// Change accessor to return different query
-		currentValue = "second";
+		expect(result.current.data?.id).toBe("query2");
+	});
 
-		// Second execute should use new query
-		let queryResult2: string | undefined;
-		await act(async () => {
-			queryResult2 = await result.current.execute();
+	test("shows loading state during execution", async () => {
+		const mockClient = createMockClient();
+		// Create the pending promise upfront so resolvePromise is assigned immediately
+		let resolvePromise!: (value: { id: string }) => void;
+		const pendingPromise = new Promise<{ id: string }>((resolve) => {
+			resolvePromise = resolve;
 		});
+		const mockQuery = {
+			then: (onFulfilled: any, onRejected?: any) => {
+				return pendingPromise.then(onFulfilled, onRejected);
+			},
+		} as unknown as QueryResult<{ id: string }>;
 
-		expect(queryResult2).toBe("second");
-	});
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
 
-	test("shows loading state during execution", async () => {
-		const mockQuery = createMockQueryResult<{ id: string }>();
+		let executePromise: Promise<any>;
+		act(() => {
+			executePromise = result.current.execute();
+		});
 
-		const { result } = renderHook(() => useLazyQuery(mockQuery));
+		expect(result.current.loading).toBe(true);
 
-		// Execute and set value
-		let executePromise: Promise<{ id: string }>;
 		await act(async () => {
-			executePromise = result.current.execute();
-			mockQuery._setValue({ id: "123" });
+			resolvePromise({ id: "test" });
 			await executePromise;
 		});
 
 		expect(result.current.loading).toBe(false);
-		expect(result.current.data).toEqual({ id: "123" });
 	});
 
 	test("does not update state after unmount", async () => {
-		const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+		const mockClient = createMockClient();
+		// Create the pending promise upfront so resolvePromise is assigned immediately
+		let resolvePromise!: (value: { id: string }) => void;
+		const pendingPromise = new Promise<{ id: string }>((resolve) => {
+			resolvePromise = resolve;
+		});
+		const mockQuery = {
+			then: (onFulfilled: any, onRejected?: any) => {
+				return pendingPromise.then(onFulfilled, onRejected);
+			},
+		} as unknown as QueryResult<{ id: string }>;
 
-		const { result, unmount } = renderHook(() => useLazyQuery(mockQuery));
+		const { result, unmount } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
+		});
+
+		let executePromise: Promise<any>;
+		act(() => {
+			executePromise = result.current.execute();
+		});
 
-		// Start execution, unmount, then resolve
-		const executePromise = result.current.execute();
 		unmount();
 
-		// Resolve after unmount
+		// Resolve after unmount - should not cause errors
 		await act(async () => {
-			mockQuery._setValue({ id: "123", name: "John" });
+			resolvePromise({ id: "test" });
 			await executePromise;
 		});
-
-		// Test passes if no error is thrown (state update after unmount would cause error)
-		expect(true).toBe(true);
 	});
 
-	test("clears error on successful execute after previous error", async () => {
-		const mockQuery1 = createMockQueryResult<{ id: string }>();
-		const mockQuery2 = createMockQueryResult<{ id: string }>({ id: "123" });
+	test("can execute multiple times", async () => {
+		const mockClient = createMockClient();
+		let callCount = 0;
+		const mockQuery = {
+			then: (onFulfilled: any) => {
+				callCount++;
+				return Promise.resolve({ count: callCount }).then(onFulfilled);
+			},
+		} as unknown as QueryResult<{ count: number }>;
 
-		const { result, rerender } = renderHook(({ query }) => useLazyQuery(query), {
-			initialProps: { query: mockQuery1 },
+		const { result } = renderHook(() => useLazyQuery(() => mockQuery, []), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		// First execution fails
 		await act(async () => {
-			const executePromise = result.current.execute();
-			mockQuery1._setError(new Error("Query failed"));
-			try {
-				await executePromise;
-			} catch {
-				// Expected error
-			}
+			await result.current.execute();
 		});
+		expect(result.current.data?.count).toBe(1);
 
-		expect(result.current.error?.message).toBe("Query failed");
+		await act(async () => {
+			await result.current.execute();
+		});
+		expect(result.current.data?.count).toBe(2);
+	});
 
-		// Switch to successful query
-		rerender({ query: mockQuery2 });
+	test("Route + Params pattern works", async () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string }>({ id: "user-123" });
+		const route = (_params: { id: string }) => mockQuery;
+
+		const { result } = renderHook(() => useLazyQuery(() => route, { id: "123" }), {
+			wrapper: createWrapper(mockClient),
+		});
 
-		// Second execution succeeds
 		await act(async () => {
 			await result.current.execute();
 		});
 
-		expect(result.current.error).toBe(null);
-		expect(result.current.data).toEqual({ id: "123" });
+		expect(result.current.data?.id).toBe("user-123");
 	});
 
-	test("can execute multiple times", async () => {
-		const mockQuery1 = createMockQueryResult<{ count: number }>();
-		const mockQuery2 = createMockQueryResult<{ count: number }>();
+	test("Route + Params with null route", async () => {
+		const mockClient = createMockClient();
 
-		const { result, rerender } = renderHook(({ query }) => useLazyQuery(query), {
-			initialProps: { query: mockQuery1 },
+		const { result } = renderHook(() => useLazyQuery(() => null, { id: "123" }), {
+			wrapper: createWrapper(mockClient),
 		});
 
-		// First execution
+		let executeResult: any;
 		await act(async () => {
-			const executePromise = result.current.execute();
-			mockQuery1._setValue({ count: 1 });
-			await executePromise;
+			executeResult = await result.current.execute();
 		});
 
-		expect(result.current.data?.count).toBe(1);
+		expect(executeResult).toBe(null);
+		expect(result.current.data).toBe(null);
+	});
 
-		// Change to second query and execute again
-		rerender({ query: mockQuery2 });
+	test("select transforms the data", async () => {
+		const mockClient = createMockClient();
+		const mockQuery = createMockQueryResult<{ id: string; name: string }>({
+			id: "123",
+			name: "John",
+		});
+
+		const { result } = renderHook(
+			() =>
+				useLazyQuery(() => mockQuery, [], {
+					select: (data) => data.name.toUpperCase(),
+				}),
+			{ wrapper: createWrapper(mockClient) },
+		);
 
 		await act(async () => {
-			const executePromise = result.current.execute();
-			mockQuery2._setValue({ count: 2 });
-			await executePromise;
+			await result.current.execute();
 		});
 
-		expect(result.current.data?.count).toBe(2);
+		expect(result.current.data).toBe("JOHN");
 	});
 });