Docs: Vitest plugin adjustments #32843
Conversation
jonniebigodes
added
documentation
ci:docs
📝 WalkthroughWalkthroughDocumentation-only changes: adjust code-fence languages, add a web-components addon-vitest snippet, expand and mirror Vitest 3/4 config examples (including Playwright/browser and tag options), replace inline examples with snippet references, and apply minor import formatting fixes across snippets and docs. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)docs/**📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (2)📚 Learning: 2025-10-13T13:33:14.659ZApplied to files:
📚 Learning: 2025-09-17T08:11:04.287ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (4)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/_snippets/addon-vitest-set-project-annotations-simple.md(1 hunks)docs/_snippets/tags-remove-in-story.md(0 hunks)docs/_snippets/vite-includeStorybookNextjsPlugin.md(1 hunks)docs/_snippets/vitest-plugin-vitest-config.md(3 hunks)docs/_snippets/vitest-plugin-vitest-debug-option-ci.md(1 hunks)docs/_snippets/vitest-plugin-vitest-tags-configuration.md(1 hunks)docs/_snippets/vitest-plugin-vitest-workspace.md(1 hunks)docs/writing-tests/in-ci.mdx(1 hunks)docs/writing-tests/integrations/vitest-addon.mdx(4 hunks)
💤 Files with no reviewable changes (1)
- docs/_snippets/tags-remove-in-story.md
🧰 Additional context used
📓 Path-based instructions (1)
docs/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Update documentation under
docs/for significant changes, including migration guides for breaking changes
Files:
docs/_snippets/vitest-plugin-vitest-debug-option-ci.mddocs/_snippets/vite-includeStorybookNextjsPlugin.mddocs/writing-tests/integrations/vitest-addon.mdxdocs/_snippets/addon-vitest-set-project-annotations-simple.mddocs/_snippets/vitest-plugin-vitest-config.mddocs/_snippets/vitest-plugin-vitest-tags-configuration.mddocs/writing-tests/in-ci.mdxdocs/_snippets/vitest-plugin-vitest-workspace.md
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Applies to code/vitest.workspace.ts : Keep and use the Vitest workspace configuration at code/vitest.workspace.ts
Applied to files:
docs/_snippets/vitest-plugin-vitest-debug-option-ci.mddocs/writing-tests/integrations/vitest-addon.mdxdocs/_snippets/vitest-plugin-vitest-config.mddocs/_snippets/vitest-plugin-vitest-tags-configuration.mddocs/_snippets/vitest-plugin-vitest-workspace.md
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
docs/_snippets/vitest-plugin-vitest-debug-option-ci.mddocs/writing-tests/integrations/vitest-addon.mdxdocs/_snippets/vitest-plugin-vitest-config.mddocs/_snippets/vitest-plugin-vitest-tags-configuration.mddocs/writing-tests/in-ci.mdxdocs/_snippets/vitest-plugin-vitest-workspace.md
🪛 LanguageTool
docs/_snippets/vitest-plugin-vitest-debug-option-ci.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: ts filename="vitest.config.ts" renderer="common" tabTitle="Vitest 4" export default defineConfig({ // ... test: { // ... projects: [ { plugins: [ storybookTest({ // ... // 👇 Use the environment variable you passed storybookUrl: process.env.SB_URL, }), ], }, ], }, }); ts filename="vitest.workspace.ts" renderer="common" tabTitle="Vitest 3" export default defineWorkspace([ // ... { // ... { plugins: [ storybookTest({ // ... // 👇 Use the environment variable you passed storybookUrl: process.env.SB_URL }), ], }, }, ]);
(QB_NEW_DE)
docs/_snippets/addon-vitest-set-project-annotations-simple.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts" // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. import { setProjectAnnotations } from '@storybook/your-framework'; import * as previewAnnotations from './preview'; const annotations = setProjectAnnotations([previewAnnotations]); ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts" // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite import { setProjectAnnotations } from '@storybook/your-framework'; import * as previewAnnotations from './preview'; const annotations = setProjectAnnotations([previewAnnotations]); ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts" import { setProjectAnnotations } from '@storybook/vue3-vite'; import * as previewAnnotations from './preview'; const annotations = setProjectAnnotations([previewAnnotations]); ts filename=".storybook/vitest.setup.ts" renderer="web-components" language="ts" import { setProjectAnnotations } from '@storybook/web-components-vite'; import * as previewAnnotations from './preview'; const annotations = setProjectAnnotations([previewAnnotations]);
(QB_NEW_DE)
docs/_snippets/vitest-plugin-vitest-tags-configuration.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: ts filename="vitest.config.ts" renderer="common" tabTitle="Vitest 4" export default defineConfig({ // ... test: { // ... projects: [ { plugins: [ storybookTest({ // ... tags: { include: ['test'], exclude: ['experimental'], }, }), ], // ... }, ], }, }); ts filename="vitest.workspace.ts" renderer="common" tabTitle="Vitest 3" export default defineWorkspace([ // ... { // ... { plugins: [ storybookTest({ // ... tags: { include: ['test'], exclude: ['experimental'], }, }), ], }, }, ]);
(QB_NEW_DE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (12)
docs/_snippets/vite-includeStorybookNextjsPlugin.md (1)
2-3: Minor formatting improvement: consistent quote and semicolon style.Updated import statements to use single quotes and added trailing semicolons for consistency with common TypeScript/JavaScript conventions in the documentation examples.
docs/_snippets/addon-vitest-set-project-annotations-simple.md (1)
1-29: LGTM! Consistent framework documentation with web-components support.Updated language fencing for consistency and added web-components renderer support with the correct import path (
@storybook/web-components-vite). All setProjectAnnotations examples now follow a uniform pattern across React, Svelte, Vue, and Web Components renderers.docs/_snippets/vitest-plugin-vitest-workspace.md (1)
122-161: LGTM! Web-components renderer support added consistently.Added web-components workspace configuration following the same pattern as React, Vue, and Svelte variants. The browser configuration (Playwright provider, headless mode, Chromium instance) and setupFiles reference are correctly applied.
docs/writing-tests/in-ci.mdx (1)
334-338: LGTM! Proper external snippet reference with formatting guards.Replaced inline code example with a clean
<CodeSnippets>reference to the external snippet atvitest-plugin-vitest-debug-option-ci.md. Theprettier-ignoredirectives correctly prevent formatter interference, maintaining documentation layout integrity.Verify that the referenced snippet file path
vitest-plugin-vitest-debug-option-ci.mdresolves correctly from the docs structure (should map todocs/_snippets/vitest-plugin-vitest-debug-option-ci.md).docs/writing-tests/integrations/vitest-addon.mdx (4)
66-66: LGTM! Clear version-specific guidance for test configuration.Added explicit guidance distinguishing between Vitest ≥ 4.0 (use separate test project) and Vitest 3.x (use workspace file). This helps users select the correct configuration pattern for their environment.
100-102: Good documentation version clarity.Updated example header to clarify this applies to Vitest < 3.2, and link now points to v3-specific documentation. Helps users navigate to the version-appropriate reference material.
227-231: LGTM! Proper external snippet reference for tags configuration.Replaced inline configuration block with
<CodeSnippets>reference tovitest-plugin-vitest-tags-configuration.md. The formatter-ignore guards ensure layout consistency. This centralized example ensures both Vitest 4 and 3 variants are shown.Verify that
vitest-plugin-vitest-tags-configuration.mdcorrectly displays both Vitest 4 and Vitest 3 configuration variants as expected by users reading this section.
298-298: LGTM! Consistent version guidance in FAQ section.Reiterated version-specific guidance (test project vs workspace) in the FAQ, reinforcing the pattern across the documentation.
docs/_snippets/vitest-plugin-vitest-config.md (4)
1-96: LGTM! React examples show correct Vitest 4/3 configuration patterns.Both Vitest 4 and 3 React examples correctly demonstrate version-specific differences:
- Vitest 4 (line 3): imports
playwrightfrom@vitest/browser-playwright, usesprovider: playwright({})- Vitest 3 (line 85): uses
provider: 'playwright'as string literalConfiguration structure, plugins, and setupFiles are consistent and properly configured.
98-192: LGTM! Vue examples mirror React pattern with correct version handling.Vue configuration examples (Vitest 4 and 3) follow the established pattern with consistent provider configuration differences between versions. Framework-specific imports and configuration are accurate.
195-289: LGTM! Svelte examples maintain consistent framework support.Svelte Vitest 4 and 3 examples follow the version-specific pattern established across React and Vue, providing complete framework coverage with appropriate provider configuration for each Vitest version.
292-386: LGTM! Web-components renderer coverage completed across both Vitest versions.Added web-components renderer support for both Vitest 4 and 3, maintaining consistency with React, Vue, and Svelte examples. The provider configuration correctly follows the Vitest version-specific pattern (function call vs string literal).
|
View your CI Pipeline Execution ↗ for commit 3318f65
☁️ Nx Cloud last updated this comment at |
| configDir: path.join(dirname, '.storybook'), | ||
| // This should match your package.json script to run Storybook | ||
| // The --ci flag will skip prompts and not open a browser | ||
| storybookScript: 'yarn storybook --ci', |
There was a problem hiding this comment.
I think we should change this to --no-open instead
There was a problem hiding this comment.
I have no objections to it.
yannbf
left a comment
yannbf
left a comment
There was a problem hiding this comment.
LGTM, thanks a lot @jonniebigodes !!
yannbf
added
the
patch:yes
Docs: Vitest plugin adjustments (cherry picked from commit ee7ce39)
github-actions
bot
added
the
patch:done
ndelangen
removed
the
patch:yes
Follows up on #32819
What I did
With this pull request, the Vitest documentation was updated to reflect the recent changes regarding browser mode, configuration, etc., introduced with the Vitest 4 release.
What was done:
@yannbf can you take a glance at this and let me know of any feedback you may have? Thanks in advance
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit