Test custom React hooks effectively with testing-library
# Testing React Hooks Guide for Google Antigravity
Test custom React hooks with confidence using testing-library and Google Antigravity IDE.
## Testing Custom Hooks
```typescript
// hooks/__tests__/useCounter.test.ts
import { renderHook, act } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { useCounter } from "../useCounter";
describe("useCounter", () => {
it("should initialize with default value", () => {
const { result } = renderHook(() => useCounter());
expect(result.current.count).toBe(0);
});
it("should increment count", () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});
it("should reset to initial value", () => {
const { result } = renderHook(() => useCounter(10));
act(() => {
result.current.increment();
result.current.reset();
});
expect(result.current.count).toBe(10);
});
});
```
## Testing Async Hooks
```typescript
// hooks/__tests__/useAsync.test.ts
import { renderHook, waitFor } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { useAsync } from "../useAsync";
describe("useAsync", () => {
const mockData = { id: 1, name: "Test" };
const mockFetch = vi.fn();
beforeEach(() => {
vi.clearAllMocks();
});
it("should handle successful async operation", async () => {
mockFetch.mockResolvedValue(mockData);
const { result } = renderHook(() => useAsync(mockFetch));
expect(result.current.loading).toBe(true);
await waitFor(() => {
expect(result.current.loading).toBe(false);
});
expect(result.current.data).toEqual(mockData);
expect(result.current.error).toBeNull();
});
it("should handle error", async () => {
const error = new Error("Failed to fetch");
mockFetch.mockRejectedValue(error);
const { result } = renderHook(() => useAsync(mockFetch));
await waitFor(() => {
expect(result.current.loading).toBe(false);
});
expect(result.current.data).toBeNull();
expect(result.current.error).toBe(error);
});
});
```
## Best Practices
1. **Use renderHook** for testing hooks in isolation
2. **Wrap state updates** in act()
3. **Use waitFor** for async operations
4. **Provide context wrappers** when needed
5. **Mock timers** for debounce/throttle tests
6. **Test edge cases** and error states
7. **Keep tests focused** on hook behavior
Google Antigravity helps generate comprehensive hook tests with proper mocking and assertions.This testing prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their testing implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For testing projects, consider mentioning your framework version, coding style, and any specific libraries you're using.