feat(ui): display test's snapshot result on vitest-ui #8335

Shinyaigeek · 2025-07-22T17:16:11Z

Description

In this ticket, I implemented to display test's snapshot result on vitest-ui. Please feel free to provide any feedback about UserInterface(=vitest/ui itself) and also data flow design.

In this implementation, vitest/ui can display added/matched/unmatched/unchecked snapshots result. Vitest node environment(=vm context) executes tests and generate snapshot result, and passes that result to vitest core context via rpc(), and vitest-ui fetches some data from vitest core context. However, vitest node environment passes only snapshot diff count information to vitest core context. in current implementation. So I changed to pass more detailed snapshot result to vitest core context to display these in vitest-ui.

If you have any concern or something unclear, please feel free to pointed out!

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
Ideally, include a test that fails without this PR but passes with it.
Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

Run the tests with pnpm test:ci.

Documentation

If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

…shot result more detail

netlify · 2025-07-22T17:17:39Z

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a24c7b5`
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/687fc75e729fb900081334d3
😎 Deploy Preview	https://deploy-preview-8335--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sheremet-va

I wonder if we can display them in a similar way to annotations (but hidden by default, unless there is an error). This will require storing more information in Test (maybe snapshot names and location?) Also regarding existing code, maybe if the snapshot failed, we should show the diff?

sheremet-va · 2025-07-23T14:38:46Z

packages/snapshot/src/manager.ts


  add(result: SnapshotResult): void {
    addSnapshotResult(this.summary, result)
+    this.result = result


Why do we need a separate variable? What does result represent?

sheremet-va · 2025-07-23T14:39:36Z

packages/ui/client/components/views/ViewSnapshot.vue

+      <div v-if="snapshotData.snapshots.unmatched.length > 0" class="space-y-2">
+        <details class="group" open>
+          <summary class="cursor-pointer p-2 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded text-red-700 dark:text-red-300 font-medium text-sm">
+            ❌ Unmatched Snapshots ({{ snapshotData.snapshots.unmatched.length }})


What is "unmatched" snapshot?

sheremet-va · 2025-07-23T14:40:22Z

packages/ui/client/components/views/ViewSnapshot.vue

+      <div v-if="snapshotData.snapshots.added.length > 0" class="space-y-2">
+        <details class="group" open>
+          <summary class="cursor-pointer p-2 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded text-green-700 dark:text-green-300 font-medium text-sm">
+            🆕 Added Snapshots ({{ snapshotData.snapshots.added.length }})


Let's not use emojis, we have iconify icons available (see dependencies for from which library)

sheremet-va · 2025-07-23T14:41:37Z

packages/vitest/src/api/setup.ts

+        async getSnapshotData(): Promise<SnapshotData | void> {
+          try {
+            // Get snapshot result from the Vitest context
+            const snapshotResult = ctx.snapshot.result


Seems like this is sensitive to race conditions? result doesn't represent all of snapshots, or? Only for a specific file?

sheremet-va · 2025-07-23T14:42:49Z

packages/vitest/src/api/types.ts

+export interface SnapshotData {
+  filepath: string
+  snapshots: {
+    added: Array<{


This can probably be its own type, so we don't need to repeat it

Shinyaigeek · 2025-07-24T08:34:49Z

@sheremet-va Thank you for your feedback!

I wonder if we can display them in a similar way to annotations (but hidden by default, unless there is an error). This will require storing more information in Test (maybe snapshot names and location?)

Is my understanding correct that, in this PR, instead of displaying Snapshots within a dedicated Snapshot Tab, you're proposing to have an expandable Annotation Block within the Code Tab, similar to Test Annotations in an HTML Reporter, at the location where Snapshot comparisons are performed in the code, and expanding it would allow users to view the Snapshot? If so, that sounds good! Also, in that case, InlineSnapshot might be ignored since its content is already present within the code itself.

Also regarding existing code, maybe if the snapshot failed, we should show the diff?

That's true! Failed snapshots are displayed in Report Tab in current implementation, so maybe we don't need to display failed snapshot results in Code(or Snapshot) Tab duplicatedly.

sheremet-va · 2025-07-25T10:11:22Z

Is my understanding correct that, in this PR, instead of displaying Snapshots within a dedicated Snapshot Tab, you're proposing to have an expandable Annotation Block within the Code Tab, similar to Test Annotations in an HTML Reporter, at the location where Snapshot comparisons are performed in the code, and expanding it would allow users to view the Snapshot? If so, that sounds good! Also, in that case, InlineSnapshot might be ignored since its content is already present within the code itself.

Yes, that is what I am proposing. We can probably reuse annotations for these. If needed, the type can be extended. Or we can also introduce a separate field that is only available after the test has finished (annotations appear while the test is running and have a separate reporter event which can make the reporting slower). I think I would prefer to reduce the amount of text that we have to pass down between UI and Node because it's JSON.stringified which takes slower the longer the string is. (Maybe we should store the name of the snapshot and load the content separately)

That's true! Failed snapshots are displayed in Report Tab in current implementation, so maybe we don't need to display failed snapshot results in Code(or Snapshot) Tab duplicatedly.

Makes sense, let's not duplicate it.

Shinyaigeek · 2025-07-27T09:15:35Z

Thank you! I could grasp what I should do! I will implement the snapshot visualization feature according to what should be done, so please let me more time to implement this. (perhaps, I will re-create PullRequest if the most of implementation in this PR is not needed, but I cannot judge at least now)

Shinyaigeek added 5 commits July 23, 2025 00:02

Extends some data fields for SnapshotState to accumulate overall snap…

2b6272d

…shot result more detail

Make SnapshotManager to have result in it's property

6833873

Make SnapshotResult to have more detailed snapshot result

596afd0

Return Snapshot result data from rpc api

444a8d9

Visualize snapshot data on vitest/ui

a24c7b5

sheremet-va requested changes Jul 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(ui): display test's snapshot result on vitest-ui #8335

feat(ui): display test's snapshot result on vitest-ui #8335

Shinyaigeek commented Jul 22, 2025 •

edited

Loading

Uh oh!

netlify bot commented Jul 22, 2025

Uh oh!

sheremet-va left a comment

Uh oh!

sheremet-va Jul 23, 2025

Uh oh!

sheremet-va Jul 23, 2025

Uh oh!

sheremet-va Jul 23, 2025

Uh oh!

sheremet-va Jul 23, 2025

Uh oh!

sheremet-va Jul 23, 2025

Uh oh!

Shinyaigeek commented Jul 24, 2025

Uh oh!

sheremet-va commented Jul 25, 2025 •

edited

Loading

Uh oh!

Shinyaigeek commented Jul 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat(ui): display test's snapshot result on vitest-ui #8335

Are you sure you want to change the base?

feat(ui): display test's snapshot result on vitest-ui #8335

Conversation

Shinyaigeek commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Documentation

Changesets

Uh oh!

netlify bot commented Jul 22, 2025

✅ Deploy Preview for vitest-dev ready!

Uh oh!

sheremet-va left a comment

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Shinyaigeek commented Jul 24, 2025

Uh oh!

sheremet-va commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Shinyaigeek commented Jul 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Shinyaigeek commented Jul 22, 2025 •

edited

Loading

sheremet-va commented Jul 25, 2025 •

edited

Loading