Docs: Improve vitest addon config snippets #32976

ehoodgoren · 2025-11-07T01:39:18Z

Relates #32895, as well as to 2 previous PRS: #32896, #32228.

Originally, in my issue above, I reported that an extends: true block from the docs didn't work when it was inside defineProject - it was then removed from the docs in #32896. However, it's an important part when you want to preserve configuration from vite.config.ts (or any other shared config) - in my case, I needed to preserve some aliases, as well as some variables in the define block. It lead me to understand when extends: true is used and when not, and how I can correctly add it to my project.

extends: true indeed cannot be a part of defineProject - TS reports that as an unknown key. Instead, it should be used with inline projects. Example from their docs:

Okay then. But... vitest mention in their docs that:

"Projects do not support all configuration properties. For better type safety, use the defineProject method instead of defineConfig within project configuration files"

How come?
That's because defineProject should only be used when a project is extracted to its own <project>.vitest.config.ts file. See how in their docs defineProject is only used in that case:

How would you extends: true in a project that is extracted to its own file then? Well, with its own mergeConfig of the config you need. Here they show both cases:

So, to sum it up - I think that extends: true should be brought back to the docs examples, as its valuable. For that, we just need replace defineProject with inline projects.

What I did

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-storybook/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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team 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

Documentation
- Updated configuration examples for Vitest projects across React, Vue, Svelte, and Web Components frameworks to demonstrate simplified configuration patterns.
- Adjusted configuration samples for both Vitest 3 and Vitest 4 variants.

coderabbitai · 2025-11-07T05:20:15Z

📝 Walkthrough

Walkthrough

Documentation snippet file updated to replace defineProject() wrapper usage with plain object literals containing extends: true across all Vitest flavor examples (React, Vue, Svelte, Web Components) in both Vitest 3 and 4 variants. Import of defineProject removed accordingly.

Changes

Cohort / File(s)	Change Summary
Vitest config snippet updates `docs/_snippets/vitest-plugin-vitest-config.md`	Removed `defineProject` from vitest/config imports; replaced all `defineProject({ ... })` calls with plain objects `{ extends: true, ... }` throughout React, Vue, Svelte, and Web Components example blocks for both Vitest 3 and Vitest 4 sections

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Verify all occurrences of defineProject() across the different flavor blocks were correctly replaced with { extends: true, ... } syntax
Confirm the updated documentation examples are syntactically valid for the target Vitest versions

Possibly related PRs

Docs: Fix Vitest option instructions #32896: Modifies the same Vitest config snippet file and adjusts defineProject/extends configuration
Addon Vitest: Support modifying mergeConfig on addon setup #32753: Switches Vitest projects from defineProject wrapper to plain objects with extends: true
Docs: Vitest plugin adjustments #32843: Updates the same Vitest config documentation file with related Vitest project configuration changes

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4721fee and dce35e0.

📒 Files selected for processing (1)

docs/_snippets/vitest-plugin-vitest-config.md (17 hunks)

🧰 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-config.md

🧠 Learnings (13)

📓 Common learnings

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)

Learnt from: CR
Repo: storybookjs/storybook PR: 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

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested

📚 Learning: 2025-09-17T08:11:04.287Z

Learnt from: CR
Repo: storybookjs/storybook PR: 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-config.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:04.287Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Use Vitest as the test runner for this repository

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 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-config.md

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses

Applied to files:

docs/_snippets/vitest-plugin-vitest-config.md

⏰ 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). (2)

GitHub Check: Danger JS
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (2)

docs/_snippets/vitest-plugin-vitest-config.md (2)

2-2: Documentation correction applied consistently across all Vitest config examples.

The import statements have been updated correctly across all 8 code blocks (React/Vue/Svelte/Web Components × Vitest 3/4) by removing the unused defineProject import.

Also applies to: 51-51, 99-99, 148-148, 196-196, 245-245, 293-293, 342-342

20-43: Inline project pattern correctly restored with extends: true.

All project configurations have been properly updated from defineProject() wrappers to plain objects containing extends: true at the root level. This pattern correctly enables inline projects to inherit shared configuration (aliases, define variables) from the root vite.config.ts, addressing the core issue that defineProject does not support the extends key. The changes are applied consistently across all renderer and version variants.

Also applies to: 68-91, 117-140, 165-188, 214-237, 262-285, 311-334, 359-382

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-11-07T05:25:56Z

View your CI Pipeline Execution ↗ for commit dce35e0

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	43s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-07 05:36:25 UTC

…ject-docs Docs: Improve vitest addon config snippets (cherry picked from commit b9695ea)

update snippets

dce35e0

ehoodgoren requested review from jonniebigodes and kylegach as code owners November 7, 2025 01:39

ehoodgoren mentioned this pull request Nov 7, 2025

[Bug]: Type 'PreviewAddon<AddonTypes>' is not assignable to type 'PluginOption'.ts(2769), when initializing storybook vitest addon #32895

Closed

valentinpalkovic approved these changes Nov 7, 2025

View reviewed changes

valentinpalkovic added documentation ci:docs Run the CI jobs for documentation checks only. labels Nov 7, 2025

valentinpalkovic changed the title ~~fix(docs): improve vitest addon config snippets~~ Docs: Improve vitest addon config snippets Nov 7, 2025

valentinpalkovic merged commit b9695ea into storybookjs:next Nov 7, 2025
14 of 16 checks passed

valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Nov 7, 2025

This was referenced Nov 7, 2025

Release: Patch 10.0.6 #32962

Merged

Release: Prerelease 10.1.0-alpha.7 #32958

Merged

yannbf pushed a commit that referenced this pull request Nov 7, 2025

Merge pull request #32976 from ehoodgoren/chore/ehoodgoren/vitest-pro…

298cf66

…ject-docs Docs: Improve vitest addon config snippets (cherry picked from commit b9695ea)

github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Nov 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Docs: Improve vitest addon config snippets #32976

Docs: Improve vitest addon config snippets #32976

ehoodgoren commented Nov 7, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Nov 7, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

Uh oh!

nx-cloud bot commented Nov 7, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Docs: Improve vitest addon config snippets #32976

Docs: Improve vitest addon config snippets #32976

Conversation

ehoodgoren commented Nov 7, 2025 • edited by coderabbitai 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

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 7, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

Uh oh!

nx-cloud bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ehoodgoren commented Nov 7, 2025 •

edited by coderabbitai bot

Loading

nx-cloud bot commented Nov 7, 2025 •

edited

Loading