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

Files

T

Daniel DimitrovandGitHub b935e9ab2c chore: unify prettier setup across repo (#6849 )

* chore: unify prettier setup across repo

there were slight inconsistencies in the prettier setup across the repo which lead to annoying problems. Running prettier from the root would modify files in subdirectories. But if you would run prettier from those subdirecotry -> the same files that were previously modified wouldn’t be treated as a problem.

Now every prettier command across the repo is loading the same root prettier config. In addition to this lintstaged should now only run on the staged files and not on the complete code base.

* fix: prettier

it turns out that the node_modules/.bin/prettier that we end up with is not from our set prettier v3.6.2, but rather from jest-snapshot-prettier. It sets:
  bin:
    prettier: bin-prettier.js

So, when we run `yarn prettier` - yarn correctly resolves with v3 and our config. But when we run it through lint-staged since we just call prettier - we end up with the jest-snapshot-prettier prettier binary… This would then reformat the files again and will change the changes made by prettier v3…

* fix: .prettierignore

2025-12-15 15:09:48 +01: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
yarn test:storybook

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

# Update snapshots when changes are intentional
yarn 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:

yarn 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
yarn build-storybook

# Run regular Jest unit tests
yarn test

# Run all tests with coverage
yarn test:coverage

2.6 KiB Raw Permalink Blame History