Generate Snapshot TestsCAUTION

Developer-first error tracking and performance monitoring

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: generate-snapshot-tests
description: Generate snapshot test files for Sentry frontend React components. Use when asked to "generate snapshot tests", "add snapshot tests", "create visual snapshots", "write snapshot tests", "add visual regression tests", or "snapshot this component". Accepts an optional component path or name via $ARGUMENTS.
type: workflow-process
---

# Generate Snapshot Tests

Generate a `*.snapshots.tsx` file colocated with a Sentry React component, following the established pattern used by core design system components.

## Step 1: Locate the Component

If `$ARGUMENTS` is provided, treat it as a path or component name. Otherwise ask the user which component to snapshot.

Search strategies:

```
static/app/components/core/<name>/<name>.tsx
static/app/components/core/<name>/index.tsx
static/app/components/<name>.tsx
static/app/components/<name>/index.tsx
```

Use Glob or Grep to find the file if the exact path is unknown.

Read the component source file to understand:

- The component's name and its exported `Props` / `<ComponentName>Props` type
- Union types and enum-like string literals on props (e.g., `variant`, `priority`, `size`)
- Boolean toggle props (e.g., `disabled`, `checked`, `busy`)
- Whether the component is interactive (needs `onChange={() => {}}` or similar no-op handlers)

## Step 2: Determine the Import Path

| Condition                                                                                       | Import style                                                                                                                                                                                                                          |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Component lives under `static/app/components/core/` AND is published as `@sentry/scraps/<name>` | `import {ComponentName, type ComponentNameProps} from '@sentry/scraps/<name>';`                                                                                                                                                       |
| Component lives under `static/app/components/core/` but is NOT in `@sentry/scraps`              | `// eslint-disable-next-line @sentry/scraps/no-core-import -- SSR snapshot needs direct import to avoid barrel re-exports with heavy deps`<br>`import {ComponentName, type ComponentNameProps} from 'sentry/components/core/<path>';` |
| All other components                                                                            | `import {ComponentName, type ComponentNameProps} from 'sentry/components/<path>';`                                                                                                                                                    |

To check if a component is in `@sentry/scraps`, look for an existing import using `@sentry/scraps/<name>` in neighboring files, or check if other snapshot files in the same directory use `@sentry/scraps`.

## Step 3: Identify Props to Snapshot

Read the TypeScript props and classify them:

| Prop type                                                 | Action                                       |
| --------------------------------------------------------- | -------------------------------------------- |
| Union of string literals (`'sm' \| 'md' \| 'lg'`)         | Snapshot each value with `it.snapshot.each`  |
| Boolean toggle with visual impact (`disabled`, `checked`) | Snapshot `true` and `false` states           |
| Boolean flag with no visual test value                    | Skip or add a single named snapshot          |
| `children` / `className` / `style` / event handlers       | Skip — not visually interesting on their own |

Prioritize props that change the component's visual appearance substantially. For interactive components (inputs, toggles), always include disabled/checked states.

## Step 4: Write the Snapshot File

Name the output file `<component-name>.snapshots.tsx`, colocated with the component source file.

### Required imports (always include)

```tsx
import {ThemeProvider} from '@emotion/react';

import {ComponentName, type ComponentNameProps} from '@sentry/scraps/<name>'; // or appropriate path

// eslint-disable-next-line no-restricted-imports -- SSR snapshot rendering needs direct theme access
import {darkTheme, lightTheme} from 'sentry/utils/theme/theme';

const themes = {light: lightTheme, dark: darkTheme};
```

### Core structure

Always wrap in light/dark theme loop:

```tsx
describe('ComponentName', () => {
  describe.each(['light', 'dark'] as const)('%s', themeName => {
    // ... snapshot cases here
  });
});
```

### `it.snapshot.each` — for union prop variants

Use when iterating over multiple values of a single prop:

```tsx
it.snapshot.each<ComponentProps['variant']>(['info', 'warning', 'success', 'danger'])(
  '%s',
  variant => (
    <ThemeProvider theme={themes[themeName]}>
      <div style={{padding: 8}}>
        <Component variant={variant}>Label</Component>
      </div>
    </ThemeProvider>
  ),
  variant => ({theme: themeName, variant: String(variant)})
);
```

The third argument to `it.snapshot.each` is the metadata function — include all props that vary in the snapshot. This metadata is used for snapshot naming and diffing.

### `it.snapshot` — for single named snapshots

Use for one-off states (disabled, checked combinations, etc.):

```tsx
it.snapshot('disabled-unchecked', () => (
  <ThemeProvider theme={themes[themeName]}>
    <div style={{padding: 8}}>
      <Component disabled onChange={() => {}} />
    </div>
  </ThemeProvider>
));
```

Pass metadata as a third argument when it adds useful snapshot context:

```tsx
it.snapshot(
  'bold',
  () => (
    <ThemeProvi

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (2)

.claude/skills

api-docs/.node-version

Gates applied: no_behavioural_pass.