Skip to content

feat(vitest): add suites, test and snapshot name in Story JSON parameters#376

Merged
AriPerkkio merged 2 commits into
mainfrom
ari/vitest-parameters
Jun 4, 2026
Merged

feat(vitest): add suites, test and snapshot name in Story JSON parameters#376
AriPerkkio merged 2 commits into
mainfrom
ari/vitest-parameters

Conversation

@AriPerkkio

@AriPerkkio AriPerkkio commented May 29, 2026

Copy link
Copy Markdown
Member

Issue: Milestone 1 of #353.

What Changed

Adds new parameters.chromatic.vitest into the Story JSON file:

{
  "title": "test/Accordion",
  "stories": [
    {
      "name": "interactive / mouse / can be dragged / Snapshot #1",
      "globals": { "viewport": "w1280h720" },
      "parameters": {
        "__id": "test-accordion-interactive-mouse-can-be-dragged--snapshot-1",
        "server": { "id": "test-accordion-interactive-mouse-can-be-dragged-snapshot-1" },
        "chromatic": { 
          "modes": { "w1280h720": { "viewport": "w1280h720" } },
+         "vitest": {
+           "suites": ["interactive", "mouse"],
+           "test": "can be dragged",
+           "snapshot": "Snapshot #1"
+         }
        },
        "viewport": { ... },
      }
    }
  ]
}
  • parameters.chromatic.vitest.suites: string[]: contains the names of describe() calls of the test case where the snapshot originated from. Can be an empty array if no describe() was used.
  • parameters.chromatic.vitest.test: string: contains the name of test() call of the test case where the snapshot originated from.
  • parameters.chromatic.vitest.snapshot: string: contains the name of takeSnapshot() or Snapshot #<running-number> if no name was passed.
describe("one", () => {
  describe("two", () => {
    test("three", async () => {
      await takeSnapshot("four");
    });
  });
});

test("example of autosnapshot", () => {});
{
  "suites": ["one", "two"],
  "test": "three",
  "snapshot": "four"
},
{
  "suites": [],
  "test": "example of autosnapshot",
  "snapshot": "Snapshot #1"
}

Note: Screenshot below is using old implementation with parameters.vitest. All parameters are in parameters.chromatic.vitest now.
image

How to test

@changeset-bot

changeset-bot Bot commented May 29, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: febea9c

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

@pkg-pr-new

pkg-pr-new Bot commented May 29, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@chromatic-com/cypress@febea9c -D
npm i https://pkg.pr.new/@chromatic-com/playwright@febea9c -D
npm i https://pkg.pr.new/@chromatic-com/vitest@febea9c -D

commit: febea9c

Comment thread packages/vitest/src/types.ts Outdated
@AriPerkkio AriPerkkio force-pushed the ari/vitest-parameters branch from 8d735d6 to febea9c Compare June 3, 2026 06:45
@AriPerkkio AriPerkkio marked this pull request as ready for review June 4, 2026 05:04
@AriPerkkio AriPerkkio merged commit da6e972 into main Jun 4, 2026
10 of 11 checks passed
@AriPerkkio AriPerkkio deleted the ari/vitest-parameters branch June 4, 2026 05:10
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