Write Snapshot Test

Implementation Instructions

File Structure

• Stories go in the same directory as the component: ComponentName.stories.tsx
• Import pattern: import { Meta, StoryObj } from '@storybook/react'

Story Template Structure

import { Meta, StoryObj } from '@storybook/react'
import { ComponentName } from './ComponentName'

const meta: Meta<typeof ComponentName> = {
    title: 'Category/ComponentName', // Use proper categorization
    component: ComponentName,
    tags: ['autodocs'], // Include for component documentation
    parameters: {
        // Configure visual test behavior
        testOptions: {
            // Wait for loaders to disappear (default: true)
            waitForLoadersToDisappear: true,
            // Wait for specific selectors
            waitForSelector: '.specific-element',
            // Multiple selectors
            waitForSelector: ['.element1', '.element2'],
            // Allow broken images (default: false)
            allowImagesWithoutWidth: false,
            // Include navigation in fullscreen stories (default: false)
            includeNavigationInSnapshot: false,
            // Browsers to test (default: ['chromium'])
            snapshotBrowsers: ['chromium', 'webkit'],
            // Custom viewport size
            viewport: { width: 1280, height: 720 },
            // Skip iframe loading wait
            skipIframeWait: false,
        }
    },
}
export default meta

type Story = StoryObj<typeof ComponentName>

// Basic story
export const Default: Story = {
    args: {
        // Component props
    },
}

// Multiple variants showcase
export const AllVariants: Story = () => {
    return (
        <div className="deprecated-space-y-2">
            {/* Render multiple states */}
        </div>
    )
}

Component Categories

Use these standard categories in the title:

• 'Lemon UI/ComponentName' - For lemon-ui components
• 'Components/ComponentName' - For lib/components
• 'Scenes/ComponentName' - For scene-specific components
• 'Insights/ComponentName' - For insights-related components
• 'Data/ComponentName' - For data visualization components

Test Options Configuration

Wait Strategies

testOptions: {
    // Default: waits for these selectors to be hidden
    // '.Spinner', '.LemonSkeleton', '.LemonTableLoader', '.Toastify__toast',
    // '[aria-busy="true"]', '.SessionRecordingPlayer--buffering',
    // '.Lettermark--unknown', '[data-attr="loading-bar"]'
    waitForLoadersToDisappear: true,

    // Wait for specific element(s) to appear
    waitForSelector: '[data-attr="data-table"]',
    // Or multiple elements
    waitForSelector: ['[data-attr="chart"]', '.PayGateMini'],
}

Special Cases

// For components with async data
testOptions: {
    waitForSelector: '[data-attr="data-loaded"]',
}

// For components with intentionally broken images
testOptions: {
    allowImagesWithoutWidth: true,
}

// For fullscreen layouts that should include navigation