Vitest: Implement add command for vitest addon #28920

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 [email protected] sandbox or in an existing project with npx [email protected] 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 <[email protected]>

code/addons/vitest/src/postinstall.ts

…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 <[email protected]>

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

kasperpeulen added 4 commits August 22, 2024 12:07

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
26 of 31 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vitest: Implement add command for vitest addon #28920

Vitest: Implement add command for vitest addon #28920

kasperpeulen commented Aug 19, 2024 •

edited by storybook-pr-benchmarking bot

Loading

greptile-apps bot left a comment

greptile-apps bot Aug 19, 2024

greptile-apps bot Aug 19, 2024

nx-cloud bot commented Aug 19, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

storybook-bot commented Aug 20, 2024

yannbf left a comment

ghengeveld left a comment

ghengeveld Aug 22, 2024

ghengeveld Aug 22, 2024

ghengeveld Aug 22, 2024

ghengeveld Aug 22, 2024

storybook-bot commented Aug 23, 2024

Vitest: Implement add command for vitest addon #28920

Vitest: Implement add command for vitest addon #28920

Conversation

kasperpeulen commented Aug 19, 2024 • edited by storybook-pr-benchmarking bot Loading

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

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Aug 19, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 19, 2024

Choose a reason for hiding this comment

nx-cloud bot commented Aug 19, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

storybook-bot commented Aug 20, 2024

yannbf left a comment

Choose a reason for hiding this comment

ghengeveld left a comment

Choose a reason for hiding this comment

ghengeveld Aug 22, 2024

Choose a reason for hiding this comment

ghengeveld Aug 22, 2024

Choose a reason for hiding this comment

ghengeveld Aug 22, 2024

Choose a reason for hiding this comment

ghengeveld Aug 22, 2024

Choose a reason for hiding this comment

storybook-bot commented Aug 23, 2024

kasperpeulen commented Aug 19, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Aug 19, 2024 •

edited

Loading