mirror of https://github.com/luxfi/safe-wallet.git synced 2026-10-30 15:19:21 +00:00

Files

T

zeekay 7200114387 Merge upstream/dev (52 commits) + sweep yarn → pnpm

Upstream merge brings 52 commits from safe-global/safe-wallet-monorepo
into the luxfi/safe-wallet@dev fork.

Conflicts resolved:
- yarn.lock: deleted (we are on pnpm)
- apps/web/package.json: kept pnpm version + brand build scripts
  (build:safe / build:lux / build:hanzo) plus upstream's new
  generate-version.mjs step
- apps/mobile/.../Signer/appKit.ts: took upstream's import pattern
  for shared/projectId, shared/metadata, shared/mmkvStorageAdapter

Yarn sweep applied to 42 files (docs, github-actions, workflows, AGENTS,
specs, codemods, scripts, READMEs). Net result: zero yarn-* command
references anywhere outside node_modules.

  ❯ pnpm is the law in this fork. No yarn.

2026-05-27 03:25:16 -07:00

2.6 KiB

Raw Permalink Blame History

Storybook Snapshot Testing

This project uses Jest snapshot testing with Storybook's Portable Stories API to automatically generate JSON snapshots for all Storybook stories.

Overview

The snapshot testing setup automatically discovers all .stories.tsx files in the codebase and generates JSON snapshots of their rendered output. This ensures that component changes are tracked and can be reviewed in pull requests.

How It Works

Story Discovery: The test file (src/__tests__/storybook.test.tsx) automatically finds all *.stories.tsx files
Story Composition: Using @storybook/react's composeStories, each story is composed with its args, decorators, and parameters
Snapshot Generation: Each story is rendered and a JSON snapshot is captured of the resulting DOM structure
CI Integration: Snapshots are automatically tested in CI via GitHub Actions

Running Tests Locally

# Run all snapshot tests
pnpm test:storybook

# Run in CI mode (no watch, silent)
pnpm test:storybook:ci

# Update snapshots when changes are intentional
pnpm test:storybook -u

Snapshot Files

Snapshots are stored in:

src/__tests__/__snapshots__/storybook.test.tsx.snap

CI Pipeline

The GitHub Actions workflow runs on:

Pull requests that modify apps/web/**
Pushes to main branch

Workflow file: .github/workflows/web-storybook-tests.yml

When Snapshots Fail

Snapshot tests will fail when:

Component rendering output changes
New stories are added
Story configurations change

If the changes are intentional:

pnpm test:storybook -u

Then commit the updated snapshot file.

If the changes are unintentional:

Review the diff and fix the component code to match the expected output.

Benefits

Regression Detection: Catch unintended UI changes
Review Aid: Snapshot diffs show exactly what changed in components
Documentation: Snapshots serve as a record of component output
Fast Execution: Jest snapshots are much faster than visual regression tests
Version Control: Snapshot files are tracked in git for full history

Technical Details

Framework: Jest with React Testing Library
Storybook Integration: Portable Stories API (@storybook/react)
Test Environment: jest-fixed-jsdom (required for MSW compatibility)
Story Discovery: Glob pattern matching for *.stories.tsx

# View all Storybook stories in development mode
yarn storybook

# Build static Storybook
pnpm build-storybook

# Run regular Jest unit tests
pnpm test

# Run all tests with coverage
pnpm test:coverage

2.6 KiB Raw Permalink Blame History