gh-djankies-claude-configs-react-19/skills/testing-hooks/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
testing-hooks	Teaches testing custom hooks in React 19 using renderHook from React Testing Library. Use when testing custom hooks or hook behavior.	Read, Write, Edit	1.0.0

Testing Custom Hooks

Basic Hook Testing

For hook testing with Vitest fixtures and describe/test patterns, use vitest-4/skills/writing-vitest-tests which covers test structure and fixture patterns.

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('useCounter increments', () => {
  const { result } = renderHook(() => useCounter());

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

Testing Hooks with Props

import { renderHook } from '@testing-library/react';
import { useUser } from './useUser';

test('useUser fetches user data', async () => {
  const { result } = renderHook(() => useUser('123'));

  expect(result.current.loading).toBe(true);

  await waitFor(() => {
    expect(result.current.loading).toBe(false);
  });

  expect(result.current.user).toEqual({ id: '123', name: 'Alice' });
});

Testing Hooks with Context

import { renderHook } from '@testing-library/react';
import { ThemeProvider } from './ThemeContext';
import { useTheme } from './useTheme';

test('useTheme returns theme from context', () => {
  const wrapper = ({ children }) => (
    <ThemeProvider value="dark">{children}</ThemeProvider>
  );

  const { result } = renderHook(() => useTheme(), { wrapper });

  expect(result.current.theme).toBe('dark');
});

For comprehensive hook testing patterns, see: React Testing Library documentation.

References

• @vitest-4/skills/writing-vitest-tests - Fixture patterns and setup