Snapshot Test Creator

Create snapshot tests for UI components

Create snapshot tests for UI components.

Instructions

1. For React (Jest/Vitest):

import { render } from '@testing-library/react';
import { UserCard } from './UserCard';

describe('UserCard', () => {
  it('should match snapshot for standard user', () => {
    const { container } = render(
      <UserCard user={{ name: 'Alice', role: 'admin', avatar: '/alice.jpg' }} />
    );
    expect(container).toMatchSnapshot();
  });

  it('should match snapshot for user without avatar', () => {
    const { container } = render(
      <UserCard user={{ name: 'Bob', role: 'user' }} />
    );
    expect(container).toMatchSnapshot();
  });
});

2. For inline snapshots (easier to review in PRs):

it('should render title', () => {
  const { getByRole } = render(<Header title="Dashboard" />);
  expect(getByRole('heading').textContent).toMatchInlineSnapshot(`"Dashboard"`);
});

3. Update snapshots when intentional changes are made:

npx jest --updateSnapshot
# or
npx jest -u

Rules

• Snapshot each visual state: loading, error, empty, populated
• Keep snapshots small — snapshot a component, not a whole page
• Review snapshot diffs carefully in PRs — don't blindly update
• Prefer inline snapshots for simple assertions