Skip to content

📝 Add snapshot vs screenshot guidance#6524

Merged
dubzzz merged 4 commits into
mainfrom
copilot/add-guidelines-for-snap-usage
Feb 1, 2026
Merged

📝 Add snapshot vs screenshot guidance#6524
dubzzz merged 4 commits into
mainfrom
copilot/add-guidelines-for-snap-usage

Conversation

Copilot AI commented Feb 1, 2026

Copy link
Copy Markdown
Contributor

Adds clarity on when to use snapshot tests versus screenshot tests in the javascript-testing-expert skill.

Changes

  • Added two separate guidelines to Core guidelines section distinguishing snapshot usage (shape and structure, component hierarchy, attributes, non-regression) from screenshot usage (visual styling, layout)
  • Placed after existing snapshot testing guidance for logical grouping
  • Extended snapshot guidance beyond DOM to cover all types of snapshots focusing on structure and non-regression testing

The new guidelines:

**👍 Prefer** snapshots when shape and structure are important (component hierarchy, attributes, non-regression on output structure)

**👍 Prefer** screenshots when final render is important (visual styling, layout)
Original prompt

add a not for:

When to use snap
When dom structure is important

Screenshot
When final render is important

in our skills on the core guidelines section


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@changeset-bot

changeset-bot Bot commented Feb 1, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 640a74f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI changed the title [WIP] Add notes on when to use snap in guidelines 📝 Add snapshot vs screenshot guidance Feb 1, 2026
Copilot AI requested a review from dubzzz February 1, 2026 13:23
@dubzzz
dubzzz marked this pull request as ready for review February 1, 2026 13:28
@dubzzz
dubzzz enabled auto-merge (squash) February 1, 2026 13:28
@github-actions

github-actions Bot commented Feb 1, 2026

Copy link
Copy Markdown
Contributor

@pkg-pr-new

pkg-pr-new Bot commented Feb 1, 2026

Copy link
Copy Markdown
@fast-check/ava

npm i https://pkg.pr.new/@fast-check/ava@6524

fast-check

npm i https://pkg.pr.new/fast-check@6524

@fast-check/jest

npm i https://pkg.pr.new/@fast-check/jest@6524

@fast-check/packaged

npm i https://pkg.pr.new/@fast-check/packaged@6524

@fast-check/poisoning

npm i https://pkg.pr.new/@fast-check/poisoning@6524

@fast-check/vitest

npm i https://pkg.pr.new/@fast-check/vitest@6524

@fast-check/worker

npm i https://pkg.pr.new/@fast-check/worker@6524

commit: 640a74f

@dubzzz
dubzzz disabled auto-merge February 1, 2026 13:32
**❌ Don't** overuse snapshot tests; only snapshot things when the "what is expected to be seen in the snapshot" is clear
Why? Snapshots tests tend to capture too many details in the snapshot, making them hard to update given future reader is lost on what was the real thing being tested

**👍 Prefer** snapshots when DOM structure is important (component hierarchy, attributes); prefer screenshots when final render is important (visual styling, layout)

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot split into two distinct prefer, one for snap, one for screen, also extend snap tests not only to Dom as you can snap more things so it's mostly a question of shape and structure and non reg too

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split into two separate guidelines and extended snapshots to cover shape, structure, and non-regression beyond just DOM. Changes in commit 640a74f.

Copilot AI requested a review from dubzzz February 1, 2026 13:36
@dubzzz
dubzzz enabled auto-merge (squash) February 1, 2026 13:46
@github-actions

github-actions Bot commented Feb 1, 2026

Copy link
Copy Markdown
Contributor

@dubzzz
dubzzz merged commit a70df00 into main Feb 1, 2026
48 checks passed
@dubzzz
dubzzz deleted the copilot/add-guidelines-for-snap-usage branch February 1, 2026 13:53
@codecov

codecov Bot commented Feb 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.85%. Comparing base (7615aae) to head (640a74f).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6524   +/-   ##
=======================================
  Coverage   94.85%   94.85%           
=======================================
  Files         207      207           
  Lines        5581     5581           
  Branches     1467     1467           
=======================================
  Hits         5294     5294           
  Misses        274      274           
  Partials       13       13           
Flag Coverage Δ
tests 94.85% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants