Vitest: Implement add command for vitest addon by kasperpeulen · Pull Request #28920 · storybookjs/storybook

kasperpeulen · 2024-08-19T13:50:34Z

Closes #28807

What I did

Implement add command for vitest addon

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-28920-sha-cd8f1f27. Try it out in a new sandbox by running npx storybook@0.0.0-pr-28920-sha-cd8f1f27 sandbox or in an existing project with npx storybook@0.0.0-pr-28920-sha-cd8f1f27 upgrade.

More information


Published version	`0.0.0-pr-28920-sha-cd8f1f27`
Triggered by	@kasperpeulen
Repository	storybookjs/storybook
Branch	`kasper/vitest-add`
Commit	`cd8f1f27`
Datetime	Fri Aug 23 13:29:59 UTC 2024 (`1724419799`)
Workflow run	10526618266

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=28920

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.4 MB	76.4 MB	557 B	3.57	0%
initSize	169 MB	169 MB	800 B	3.27	0%
diffSize	92.8 MB	92.8 MB	243 B	0.91	0%
buildSize	7.46 MB	7.46 MB	187 B	1.04	0%
buildSbAddonsSize	1.62 MB	1.62 MB	106 B	0.91	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	0 B	-	0%
buildSbPreviewSize	351 kB	352 kB	81 B	0.75	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.46 MB	4.46 MB	187 B	0.85	0%
buildPreviewSize	3 MB	3 MB	0 B	1.43	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	23.8s	23.1s	-697ms	0.78	-3%
generateTime	21.4s	18.7s	-2s -702ms	-1.18	-14.4%
initTime	18.4s	15.8s	-2s -633ms	-1.24	🔰-16.6%
buildTime	11.3s	12.9s	1.5s	0.24	11.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.3s	7.1s	-249ms	-0.44	-3.5%
devManagerResponsive	4.8s	4.6s	-183ms	-0.54	-3.9%
devManagerHeaderVisible	890ms	950ms	60ms	1.05	6.3%
devManagerIndexVisible	924ms	995ms	71ms	1.11	7.1%
devStoryVisibleUncached	1.3s	1.4s	104ms	0.46	7.3%
devStoryVisible	923ms	993ms	70ms	1.07	7%
devAutodocsVisible	676ms	768ms	92ms	0.18	12%
devMDXVisible	682ms	670ms	-12ms	-0.41	-1.8%
buildManagerHeaderVisible	860ms	811ms	-49ms	0.61	-6%
buildManagerIndexVisible	870ms	819ms	-51ms	0.64	-6.2%
buildStoryVisible	912ms	1s	94ms	1.8	🔺9.3%
buildAutodocsVisible	684ms	677ms	-7ms	-0.35	-1%
buildMDXVisible	629ms	777ms	148ms	1.87	🔺19%

Greptile Summary

This PR enhances the Vitest addon installation process for Storybook, focusing on improved framework support and configuration setup.

Implemented postinstall function in code/addons/vitest/src/postinstall.ts for automatic Vitest setup across various frameworks
Added framework-specific plugin support for Next.js and SvelteKit in Vitest configuration
Introduced automatic generation of vitest.workspace.ts or vitest.config.ts based on existing project configuration
Updated code/lib/cli-storybook/src/add.ts to include configDir in PostinstallOptions for more flexible addon installation

greptile-apps

_{3 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings}

code/addons/vitest/src/postinstall.ts

greptile-apps · 2024-08-19T13:51:48Z

code/addons/vitest/src/postinstall.ts

+          storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+        ],
+        test: {
+          include: ['**/*.{stories}.?(m)[jt]s?(x)'],


style: The glob pattern for stories files might be too permissive

greptile-apps · 2024-08-19T13:51:48Z

code/addons/vitest/src/postinstall.ts

+  const builderPackageJson = await fs.readFile(
+    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    'utf8'
+  );


style: Wrap this in a try/catch to handle potential file read errors

nx-cloud · 2024-08-19T13:55:31Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit dc9432a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

code/addons/vitest/src/postinstall.ts

greptile-apps

_{3 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings}

code/addons/vitest/src/postinstall.ts

greptile-apps · 2024-08-20T13:55:57Z

code/addons/vitest/src/postinstall.ts

+              storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+            ],
+            test: {
+              include: ['**/*.stories.?(m)[jt]s?(x)'],


style: The glob pattern for stories files might be too permissive

greptile-apps · 2024-08-20T13:55:58Z

code/addons/vitest/src/postinstall.ts

+  const builderPackageJson = await fs.readFile(
+    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    'utf8'
+  );


style: Wrap this in a try/catch to handle potential file read errors

storybook-bot · 2024-08-20T14:29:05Z

Failed to publish canary version of this pull request, triggered by @yannbf. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/10473560827

code/addons/vitest/src/postinstall.ts

yannbf

Nice work!! We should revamp all of these messages, hopefully Kyle can assist. It's via the CLI where we will introduce the feature to people, so we should make sure they have a great experience through it.

Here are some suggestions for messages:

The Vitest addon is going to set up its plugin for you
Configuring Vitest, Playwright and Vitest browser mode dependencies
We detected that you're using Next.js. We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest. More info at: [some-link-here]
We detected that you have Vitest and workspaces configured, so we couldn't automatically set the plugin for you. Please refer to the documentation on how to complete the set up: [some-link]
There were some issues when setting up the plugin, please follow the steps to manually set up the plugin instead: [some-link]
The Vitest addon is now configured and you're ready to run your tests! Check the documentation for more information about its features and configurations at [some-link]

code/addons/vitest/src/postinstall.ts

Co-authored-by: Yann Braga <yannbf@gmail.com>

code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

yannbf · 2024-08-22T09:15:03Z

code/addons/vitest/src/postinstall.ts

+
+      const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'})
+
+      beforeAll(project.beforeAll)


Please make sure the snippet matches what we have in the docs for portable stories, or change the docs for portable stories to match the snippet

I'm not sure what you mean?

import { beforeAll } from 'vitest'; import { render as testingLibraryRender } from '@testing-library/svelte'; import { setProjectAnnotations } from '@storybook/svelte'; // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this import * as addonAnnotations from 'my-addon/preview'; import * as previewAnnotations from './.storybook/preview'; const annotations = setProjectAnnotations([ previewAnnotations, addonAnnotations, // You MUST provide this option to use portable stories with vitest { testingLibraryRender }, ]); // Run Storybook's beforeAll hook beforeAll(annotations.beforeAll);

I can remove the testingLibraryRender indeed. Do you mean that?

@kylegach Let's discuss this for another PR

code/addons/vitest/src/postinstall.ts

yannbf · 2024-08-22T09:21:34Z

code/addons/vitest/src/postinstall.ts

+  const { builder, renderer } = core;
+
+  if (!builder || !renderer) {
+    throw new Error('Could not detect your Storybook framework.');


Please tell the user what to do in this situation, I'd assume they passed the wrong config dir?

They will get an error earlier when we validate the framework:
validateFrameworkName(frameworkName);

I think this can only happen if you have a mal-configured community framework. So I think it is very unlikely.

Also, in the dev command, we don't throw anything here. As typescript is okay with it.

yannbf · 2024-08-22T09:22:39Z

code/addons/vitest/src/postinstall.ts

+
+const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];
+
+export default async function postInstall(options: PostinstallOptions) {


Do we need to do any version checks here? Given that these packages will only fully work in Storybook 8.3? Specially sveltekit

But this postinstall will only be available in 8.3 right?

…itest-add

ghengeveld

Hard to judge the functional correctness of this, but code looks alright to me.

ghengeveld · 2024-08-22T18:42:49Z

code/addons/vitest/src/postinstall.ts

+  }
+  logger.info(c.bold('Installing packages...'));
+  logger.info(packages.join(', '));
+  await packageManager.addDependencies({ installAsDevDependencies: true }, packages);


What if this or any of the other operations fail? Should we wrap in a try/catch to provide some narrative about the failure? Perhaps we may want to add telemetry to track these?

ghengeveld · 2024-08-22T18:44:33Z

code/addons/vitest/src/postinstall.ts

+    `
+  );
+
+  const configFiles = extensions.map((ext) => 'vitest.config' + ext);


Maybe we should do this mapping where extensions are defined as well?

ghengeveld · 2024-08-22T18:51:06Z

code/addons/vitest/src/postinstall.ts

+    logger.info(c.bold('Writing vitest.config.ts file...'));
+    await writeFile(
+      resolve('vitest.config.ts'),
+      dedent`


I think these code snippets should probably be in a separate file somewhere, rather than inline.

ghengeveld · 2024-08-22T18:52:10Z

code/addons/vitest/src/postinstall.ts

+  validateFrameworkName(frameworkName);
+  const frameworkPackageName = extractProperFrameworkName(frameworkName);
+
+  console.log(configDir);


I think this needs to be removed.

storybook-bot · 2024-08-23T13:05:09Z

Failed to publish canary version of this pull request, triggered by @kasperpeulen. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/10526145473

Implement add command for vitest addon

46a838f

kasperpeulen added feature request ci:normal labels Aug 19, 2024

kasperpeulen self-assigned this Aug 19, 2024

kasperpeulen marked this pull request as draft August 19, 2024 13:51

greptile-apps bot reviewed Aug 19, 2024

View reviewed changes

kasperpeulen added 3 commits August 19, 2024 16:03

Better texts

3cee65e

Improve glob

1a4a5e7

Add more log lines

f4db6c0

kasperpeulen requested review from kylegach and yannbf August 19, 2024 14:29

kasperpeulen added 2 commits August 20, 2024 15:50

Support adding workspace files if vitest.config.ts exists

c98d4c2

Update unit tests

480f404

kasperpeulen marked this pull request as ready for review August 20, 2024 13:54

kasperpeulen commented Aug 20, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

greptile-apps bot reviewed Aug 20, 2024

View reviewed changes

yannbf reviewed Aug 20, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

yannbf reviewed Aug 20, 2024

View reviewed changes

kasperpeulen and others added 7 commits August 20, 2024 17:15

Update code/addons/vitest/src/postinstall.ts

e9070eb

Co-authored-by: Yann Braga <yannbf@gmail.com>

Get correct path

675fdb8

Add comment about isolation

dbd4844

Rollback

419b81c

Fix

71ad827

Improve messages

718b879

Validate framework

a26e267

kylegach reviewed Aug 21, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

kylegach reviewed Aug 21, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

kylegach reviewed Aug 21, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

kylegach reviewed Aug 21, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

kasperpeulen and others added 7 commits August 22, 2024 10:48

Update code/addons/vitest/src/postinstall.ts

ce006bf

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

Update code/addons/vitest/src/postinstall.ts

76734a0

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

Update code/addons/vitest/src/postinstall.ts

78d544e

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

Update code/addons/vitest/src/postinstall.ts

b45a9b4

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

Update code/addons/vitest/src/postinstall.ts

d8a5c72

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>

Correct message

cc42862

Merge branch 'next' into kasper/vitest-add

3d68903

yannbf reviewed Aug 22, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

yannbf reviewed Aug 22, 2024

View reviewed changes

code/addons/vitest/src/postinstall.ts Outdated Show resolved Hide resolved

yannbf reviewed Aug 22, 2024

View reviewed changes

kasperpeulen added 5 commits August 22, 2024 12:07

Change isolate message

b80775b

Merge remote-tracking branch 'origin/kasper/vitest-add' into kasper/v…

ce2afff

…itest-add

Fix code style

4d80b1f

Fix more codestyle

0a35a32

Merge branch 'next' into kasper/vitest-add

f1031cb

ghengeveld approved these changes Aug 22, 2024

View reviewed changes

Fix default export

61338bf

kasperpeulen added 4 commits August 23, 2024 15:14

Fix

cd8f1f2

Make renderer nullable

c17df9f

Fix type issues

9630148

Throw errors in renderToCanvas in portable stories

dc9432a

kasperpeulen merged commit ea48115 into next Aug 23, 2024

kasperpeulen deleted the kasper/vitest-add branch August 23, 2024 14:15

github-actions bot mentioned this pull request Aug 23, 2024

Release: Prerelease alpha 8.3.0-alpha.9 #28938

Merged

8 tasks

kasperpeulen added needs qa Indicates that this needs manual QA during the upcoming minor/major release and removed needs qa Indicates that this needs manual QA during the upcoming minor/major release labels Aug 27, 2024


		const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'})

		beforeAll(project.beforeAll)


		const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];

		export default async function postInstall(options: PostinstallOptions) {

Uh oh!

Conversation

kasperpeulen commented Aug 19, 2024 • edited by storybook-app-bot bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot Aug 19, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 19, 2024

Choose a reason for hiding this comment

Uh oh!

nx-cloud bot commented Aug 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☁️ Nx Cloud Report

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

Uh oh!

storybook-bot commented Aug 20, 2024

Uh oh!

Uh oh!

yannbf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghengeveld left a comment

Choose a reason for hiding this comment

Uh oh!

kasperpeulen commented Aug 19, 2024 •

edited by storybook-app-bot bot

Loading

nx-cloud bot commented Aug 19, 2024 •

edited

Loading