2.2Chromatic (Storybook)

Chromatic integrates directly with Storybook to test components in isolation. This catches visual regressions at the component level before they compound into page-level issues.

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
    title: 'Components/Button',
    component: Button,
    parameters: {
        // Chromatic-specific configuration
        chromatic: {
            viewports: [320, 768, 1200],
            delay: 300, // Wait for animations
            diffThreshold: 0.063, // Sensitivity (default is 0.063)
        },
    },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
    args: { variant: 'primary', children: 'Click me' },
};

export const Disabled: Story = {
    args: { variant: 'primary', children: 'Disabled', disabled: true },
};

export const Loading: Story = {
    args: { variant: 'primary', children: 'Loading', loading: true },
    parameters: {
        chromatic: {
            // Capture after loading spinner appears
            delay: 500,
        },
    },
};

export const AllVariants: Story = {
    render: () => (
        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="ghost">Ghost</Button>
            <Button size="sm">Small</Button>
            <Button size="lg">Large</Button>
        </div>
    ),
};

Chromatic CI Integration

# In your CI pipeline
- name: Run Chromatic
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    exitOnceUploaded: true  # Don't wait for review
    onlyChanged: true       # Only snapshot changed stories
    traceChanged: true      # Detect which stories are affected by code changes