feat(vitest): add TurboSnap support

[AriPerkkio]

Issue: None, research issue at the moment.

What Changed

Adds chromaticPlugin({ turboSnap: boolean }) option for enabling TurboSnap. When true a .vitest/chromatic/preview-stats.json is generated. When (build-)archive-storybook is run, a custom webpack plugin appends stats.modules to contain the generated module graph.

Example preview-stats.json from separate project

{
  "modules": [
    {
      "id": "test/Accordion.test.tsx",
      "name": "test/Accordion.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-accordion-9.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-accordion-14.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-accordion-17.stories.json"
        }
      ]
    },
    {
      "id": "vite.config.ts",
      "name": "vite.config.ts",
      "reasons": [
        {
          "moduleName": "test/Accordion.test.tsx"
        },
        {
          "moduleName": "test/Avatar.test.tsx"
        },
        {
          "moduleName": "test/Button.test.tsx"
        },
        {
          "moduleName": "test/Example.test.tsx"
        },
        {
          "moduleName": "test/sign-in/Page.test.tsx"
        },
        {
          "moduleName": "test/sign-out/Page.test.tsx"
        }
      ]
    },
    {
      "id": "src/lib/utils.ts",
      "name": "src/lib/utils.ts",
      "reasons": [
        {
          "moduleName": "src/components/retroui/Accordion.tsx"
        },
        {
          "moduleName": "src/components/retroui/Avatar.tsx"
        },
        {
          "moduleName": "src/components/retroui/Button.tsx"
        }
      ]
    },
    {
      "id": "src/components/retroui/Accordion.tsx",
      "name": "src/components/retroui/Accordion.tsx",
      "reasons": [
        {
          "moduleName": "test/Accordion.test.tsx"
        }
      ]
    },
    {
      "id": "test/Avatar.test.tsx",
      "name": "test/Avatar.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-avatar-12.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-avatar-15.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-avatar-16.stories.json"
        }
      ]
    },
    {
      "id": "src/components/retroui/Avatar.tsx",
      "name": "src/components/retroui/Avatar.tsx",
      "reasons": [
        {
          "moduleName": "test/Avatar.test.tsx"
        }
      ]
    },
    {
      "id": "test/Button.test.tsx",
      "name": "test/Button.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-button-8.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-button-11.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-button-13.stories.json"
        }
      ]
    },
    {
      "id": "src/components/retroui/Button.tsx",
      "name": "src/components/retroui/Button.tsx",
      "reasons": [
        {
          "moduleName": "test/Button.test.tsx"
        }
      ]
    },
    {
      "id": "test/Example.test.tsx",
      "name": "test/Example.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-example-1.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-example-2.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-example-3.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/test-example-10.stories.json"
        }
      ]
    },
    {
      "id": "src/components/example/content.html",
      "name": "src/components/example/content.html",
      "reasons": [
        {
          "moduleName": "src/components/example/content.html"
        },
        {
          "moduleName": "test/Example.test.tsx"
        }
      ]
    },
    {
      "id": "src/components/example/styles.css",
      "name": "src/components/example/styles.css",
      "reasons": [
        {
          "moduleName": "test/Example.test.tsx"
        }
      ]
    },
    {
      "id": "test/sign-in/Page.test.tsx",
      "name": "test/sign-in/Page.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/pages-sign-in-4.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/pages-sign-in-7.stories.json"
        }
      ]
    },
    {
      "id": "test/sign-out/Page.test.tsx",
      "name": "test/sign-out/Page.test.tsx",
      "reasons": [
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/pages-sign-out-5.stories.json"
        },
        {
          "moduleName": ".vitest/chromatic/chromatic-archives/pages-sign-out-6.stories.json"
        }
      ]
    }
  ]
}

How to test

• Needs end-to-end QA
• Added tests to verify preview-stats.json contents
• Tested in https://github.com/AriPerkkio/visual-regression-example

[changeset-bot]

🦋 Changeset detected

Latest commit: ae8cf21

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@chromatic-com/vitest	Patch

Not sure what this means? Click here to learn what changesets are.

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@chromatic-com/cypress@ae8cf21 -D

npm i https://pkg.pr.new/@chromatic-com/playwright@ae8cf21 -D

npm i https://pkg.pr.new/@chromatic-com/vitest@ae8cf21 -D

commit: ae8cf21

[JReinhold]

LGTM