Skip to content

Build: Update internal Vitest dependencies to 4.1 #34147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
valentinpalkovic wants to merge 3 commits into from
Closed

Build: Update internal Vitest dependencies to 4.1 #34147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6ac327
Build: Update internal Vitest dependencies to 4.1
valentinpalkovic Mar 15, 2026
4d28ca9
Make Agents.md less verbose
valentinpalkovic Mar 16, 2026
d9ef2de
Dedupe lock file
valentinpalkovic Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 35 additions & 103 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Storybook is a large TypeScript monorepo. The git root is the repo root, the mai

- **Node.js**: `22.21.1` (see `.nvmrc`)
- **Package Manager**: Yarn Berry
- **Task orchestration**: NX plus the custom `yarn task` runner
- **Task orchestration**: NX
- **CI environment**: Linux and Windows

## Repository Structure
Expand Down Expand Up @@ -86,78 +86,50 @@ AST indexing keeps the sidebar fast and prevents one broken story file from brea

Run commands from the repository root unless stated otherwise.

For routine agent work, prefer the faster non-production commands first. Add `-c production` only when you need sandbox-related NX tasks or you are explicitly matching CI behavior.

### Install and compile

```bash
yarn
yarn task compile
yarn nx run-many -t compile
yarn nx compile <package-name>
```

### Lint and typecheck

```bash
yarn lint
yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fix
yarn task check
yarn nx run-many -t check
```

### Development and tests

```bash
cd code && yarn storybook:ui
cd code && yarn storybook:ui:build
cd code && yarn test
cd code && yarn test:watch
cd code && yarn storybook:vitest
```
For routine agent work, prefer the faster non-production commands first. Add `-c production` only when you need CI-parity behavior (it adds `--prod` to compile steps).

### Common task scenarios

| Scenario | Command |
| ------------------------------- | ------------------------------------------------------------------------------ |
| Compile everything quickly | `yarn nx run-many -t compile` |
| Compile one package | `yarn nx compile <package-name>` |
| Check TypeScript errors quickly | `yarn nx run-many -t check` |
| Start the internal Storybook UI | `cd code && yarn storybook:ui` |
| Build the internal Storybook UI | `cd code && yarn storybook:ui:build` |
| Run unit tests | `cd code && yarn test` |
| Run Storybook Vitest tests | `cd code && yarn storybook:vitest` |
| Generate a sandbox | `yarn task sandbox --template react-vite/default-ts --start-from auto` |
| Run sandbox E2E tests | `yarn task e2e-tests-dev --template react-vite/default-ts --start-from auto` |
| Run sandbox test-runner tests | `yarn task test-runner-dev --template react-vite/default-ts --start-from auto` |

## NX and `yarn task`

Use NX when you want better caching and dependency tracking. Prefer these faster defaults first, and only add `-c production` or `--no-link` when you specifically need sandbox parity or CI-like behavior.
| Scenario | Command |
| ------------------------------- | ----------------------------------------------------------------------- |
| Install dependencies | `yarn` |
| Compile everything quickly | `yarn nx run-many -t compile` |
| Compile one package | `yarn nx compile <package-name>` |
| Lint a specific file | `yarn nx run code:lint-js <file-relative-to-code-folder> --cache --fix` |
| Check TypeScript errors quickly | `yarn nx run-many -t check` |
| Start the internal Storybook UI | `cd code && yarn storybook:ui` |
| Build the internal Storybook UI | `cd code && yarn storybook:ui:build` |
| Run unit tests | `cd code && yarn test --reporter=agent` |
| Run unit tests in watch mode | `cd code && yarn test:watch --reporter=agent` |
| Run Storybook Vitest tests | `cd code && yarn storybook:vitest --reporter=agent` |
| Generate a sandbox | `yarn nx sandbox react-vite/default-ts` |
| Run a sandbox Storybook UI | `yarn nx dev react-vite/default-ts` |
| Run sandbox E2E tests | `yarn nx e2e-tests-dev react-vite/default-ts` |
| Run sandbox test-runner tests | `yarn nx test-runner-dev react-vite/default-ts` |

## NX

Use NX when you want better caching and dependency tracking. Prefer these faster defaults first, and only add `-c production` or `--no-link` when you specifically need sandbox parity or CI-like behavior. Use the NX MCP graph to understand task dependencies and what will be affected by each command.

```bash
# Compile all packages
yarn task compile
yarn nx run-many -t compile

# Check all packages
yarn task check
# Check all packages (depends on ALL packages compiling first)
yarn nx run-many -t check

# Run E2E tests for a template
yarn task e2e-tests-dev --template react-vite/default-ts --start-from auto
yarn nx e2e-tests-dev react-vite/default-ts -c production
# Run E2E tests for a template (triggers full sandbox chain: compile → publish → registry → sandbox → dev)
yarn nx e2e-tests-dev react-vite/default-ts

# Jump to a later step
yarn task e2e-tests-dev --start-from e2e-tests --template react-vite/default-ts
yarn nx e2e-tests-dev -c production --exclude-task-dependencies
# Skip dependency chain (only if you've already run the prerequisite steps manually)
yarn nx e2e-tests-dev --exclude-task-dependencies
```

Key points:

- `-c production` is required for sandbox-related NX commands and CI-parity runs
- `react-vite/default-ts` is the default sandbox template
- `--no-link` is opt-in, not the default
- `react-vite/default-ts` is the default sandbox template (`defaultProject` in `nx.json`)
- `-c production` adds `--prod` to compile steps for CI-parity but is not required for sandbox commands to work
- `check`, `test`, and `lint-js` all depend on `{ projects: ["*"], target: "compile" }` — running them via NX will first compile ALL packages
- NX handles task dependencies via `nx.json`

## Sandbox Notes
Expand All @@ -166,27 +138,8 @@ Sandboxes are generated outside the repository at `../storybook-sandboxes/` by d

- `STORYBOOK_SANDBOX_ROOT=./sandbox` forces local output, but is usually not preferred
- `./sandbox` inside the repo mainly exists for NX outputs, not CI sandboxes
- If sandbox generation fails, fall back to `cd code && yarn storybook:ui`

Generate and use a sandbox with the same `sandbox` command shape used elsewhere in this file:

```bash
yarn task sandbox --template react-vite/default-ts --start-from auto
# Same sandbox step via NX
yarn nx sandbox react-vite/default-ts -c production
cd ../storybook-sandboxes/react-vite-default-ts
yarn install
yarn storybook
```

Common templates:

- `react-vite/default-ts`
- `react-webpack/default-ts`
- `angular-cli/default-ts`
- `svelte-vite/default-ts`
- `vue3-vite/default-ts`
- `nextjs/default-ts`
Sandbox dependency chain: `*:compile` → `scripts:publish` → `scripts:run-registry` → `sandbox` → `prepare-sandbox` → `dev`/`build`/etc. This is a heavy operation. If sandbox generation fails, fall back to `cd code && yarn storybook:ui`.

## How To Work In This Repo

Expand All @@ -197,8 +150,9 @@ Common templates:
3. Make changes
4. Recompile affected packages
5. Validate there are no TypeScript errors with `yarn nx run-many -t check`
6. Run relevant lint and tests
7. Validate behavior in the internal Storybook UI first, then switch to sandbox or `-c production` flows only if you need template or CI parity
6. Run `cd code && yarn test --changed --reporter=agent` (faster) or `yarn nx run code:test --changed --reporter=agent` (triggers full compile first)
7. Run `yarn nx run code:lint-js <path-relative-to-code-folder-of-changed-files> --cache --fix`
8. Validate behavior in the internal Storybook UI first, then switch to sandbox or `-c production` flows only if you need template or CI parity

### For addon, framework, or renderer work

Expand All @@ -207,37 +161,15 @@ Common templates:
3. Generate a matching sandbox
4. Run the relevant test-runner, E2E, or Storybook UI validation flow

## Testing Expectations

- Use `cd code && yarn test` for unit tests
- Use Storybook UI or Chromatic for visual validation
- Use `yarn task e2e-tests --start-from auto` or `yarn task e2e-tests-dev --start-from auto` for E2E coverage
- Use `yarn task test-runner --start-from auto` or `yarn task test-runner-dev --start-from auto` for test-runner scenarios
- Use `yarn task smoke-test --start-from auto` for smoke checks

Watch-mode commands:

```bash
cd code && yarn test:watch
yarn affected:test
cd code && yarn storybook:vitest
```

When writing tests:

- Export functions that need direct tests
- Test real behavior, not just syntax patterns
- Use coverage when useful: `yarn vitest run --coverage <test-file>`
- Use coverage when useful: `yarn vitest run --coverage <test-file> --reporter=agent`
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Make the coverage command explicitly run from the code/ workspace.

Line 230 omits cd code &&, which conflicts with the repo-root default and can fail when vitest isn’t resolved from root.

Suggested doc fix 
-- Use coverage when useful: `yarn vitest run --coverage <test-file> --reporter=agent`
+- Use coverage when useful: `cd code && yarn vitest run --coverage <test-file> --reporter=agent`

Based on learnings: Tests are located in the code/ directory with root directory for test execution at ./code/.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- Use coverage when useful: `yarn vitest run --coverage <test-file> --reporter=agent`
- Use coverage when useful: `cd code && yarn vitest run --coverage <test-file> --reporter=agent`
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@AGENTS.md` at line 230, Update the command example so it explicitly runs from
the code/ workspace: change the coverage example that currently shows `yarn
vitest run --coverage <test-file> --reporter=agent` to run from the project’s
code directory by prefixing with `cd code &&` (so use `cd code && yarn vitest
run --coverage <test-file> --reporter=agent`), ensuring vitest resolves and
tests run with the correct root; update the AGENTS.md entry where that example
string appears.

- Mock external dependencies like file system access and loggers

## Quality and Logging

After changing files:

1. Format with `yarn prettier --write <file>`
2. Lint with `yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fix` or `cd code && yarn lint:js:cmd <file-relative-to-code-folder>`
3. Run relevant tests before submitting a PR

Use Storybook loggers instead of raw `console.*` in normal code paths:

- Server-side: `storybook/internal/node-logger`
Expand Down
1 change: 0 additions & 1 deletion CLAUDE.md
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
AGENTS.md
6 changes: 3 additions & 3 deletions code/addons/vitest/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@
"@types/micromatch": "^4.0.0",
"@types/node": "^22.19.1",
"@types/semver": "^7.7.1",
"@vitest/browser-playwright": "^4.0.14",
"@vitest/runner": "^4.0.14",
"@vitest/browser-playwright": "^4.1.0",
"@vitest/runner": "^4.1.0",
"empathic": "^2.0.0",
"es-toolkit": "^1.43.0",
"istanbul-lib-report": "^3.0.1",
Expand All @@ -102,7 +102,7 @@
"tree-kill": "^1.2.2",
"ts-dedent": "^2.2.0",
"typescript": "^5.9.3",
"vitest": "^4.0.14"
"vitest": "^4.1.0"
},
"peerDependencies": {
"@vitest/browser": "^3.0.0 || ^4.0.0",
Expand Down
2 changes: 1 addition & 1 deletion code/lib/eslint-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@typescript-eslint/eslint-plugin": "^8.48.0",
"@typescript-eslint/parser": "^8.48.0",
"@typescript-eslint/rule-tester": "^8.48.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/coverage-v8": "^4.1.0",
"eslint": "^8.57.1",
"eslint-plugin-eslint-plugin": "^6.5.0",
"eslint-plugin-node": "^11.1.0",
Expand Down
10 changes: 5 additions & 5 deletions code/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,10 @@
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.3.2",
"@vitejs/plugin-vue": "^4.4.0",
"@vitest/browser": "^4.0.14",
"@vitest/browser-playwright": "^4.0.14",
"@vitest/coverage-istanbul": "^4.0.14",
"@vitest/coverage-v8": "^4.0.14",
"@vitest/browser": "^4.1.0",
"@vitest/browser-playwright": "^4.1.0",
"@vitest/coverage-istanbul": "^4.1.0",
"@vitest/coverage-v8": "^4.1.0",
"chromatic": "^13.3.4",
"create-storybook": "workspace:*",
"cross-env": "^7.0.3",
Expand Down Expand Up @@ -146,7 +146,7 @@
"uuid": "^11.1.0",
"vite": "^7.0.4",
"vite-plugin-inspect": "^11.0.0",
"vitest": "^4.0.14",
"vitest": "^4.1.0",
"wait-on": "^8.0.3"
},
"dependenciesMeta": {
Expand Down
8 changes: 8 additions & 0 deletions code/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@
"inputs": ["default"],
"configurations": { "production": {} }
},
"lint-js": {
"dependsOn": [{ "projects": ["*"], "target": "compile" }],
"executor": "nx:run-commands",
"options": { "cwd": "{projectRoot}", "command": "yarn lint:js:cmd" },
"cache": true,
"inputs": ["default"],
"configurations": { "production": {} }
},
"test": {
"dependsOn": [{ "projects": ["*"], "target": "compile" }],
"executor": "nx:run-commands",
Expand Down
4 changes: 2 additions & 2 deletions scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"@typescript-eslint/eslint-plugin": "^8.48.0",
"@typescript-eslint/experimental-utils": "^5.62.0",
"@typescript-eslint/parser": "^8.48.0",
"@vitest/coverage-v8": "^4.0.14",
"@vitest/coverage-v8": "^4.1.0",
"ansi-regex": "^6.0.1",
"chromatic": "^13.3.4",
"codecov": "^3.8.1",
Expand Down Expand Up @@ -170,7 +170,7 @@
"type-fest": "~2.19",
"typescript": "^5.9.3",
"uuid": "^9.0.1",
"vitest": "^4.0.14",
"vitest": "^4.1.0",
"wait-on": "^8.0.3",
"window-size": "^1.1.1",
"yaml": "^2.8.1",
Expand Down
10 changes: 5 additions & 5 deletions test-storybooks/portable-stories-kitchen-sink/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"@vitest/browser": "4.0.4",
"@vitest/browser-playwright": "4.0.4",
"@vitest/coverage-v8": "4.0.4",
"@vitest/ui": "4.0.4",
"@vitest/browser": "^4.1.0",
"@vitest/browser-playwright": "^4.1.0",
"@vitest/coverage-v8": "^4.1.0",
"@vitest/ui": "^4.1.0",
"cypress": "^13.6.4",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
Expand All @@ -90,7 +90,7 @@
"storybook": "^10.0.0",
"typescript": "^5.8.3",
"vite": "^7",
"vitest": "4.0.4"
"vitest": "^4.1.0"
},
"nx": {
"includedScripts": []
Expand Down
6 changes: 3 additions & 3 deletions test-storybooks/yarn-pnp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
"@storybook/vue3-vite": "^10.1.0-alpha.6",
"@types/node": "^24.6.0",
"@vitejs/plugin-vue": "^6.0.1",
"@vitest/browser-playwright": "^4.0.7",
"@vitest/coverage-v8": "^4.0.7",
"@vitest/browser-playwright": "^4.1.0",
"@vitest/coverage-v8": "^4.1.0",
"@vue/tsconfig": "^0.8.1",
"eslint": "^9.29.0",
"eslint-plugin-storybook": "9.1.0-alpha.6",
Expand All @@ -70,7 +70,7 @@
"typescript": "~5.9.3",
"typescript-eslint": "^8.34.1",
"vite": "^7.1.7",
"vitest": "^4.0.14",
"vitest": "^4.1.0",
"vue-tsc": "^3.1.0"
},
"nx": {
Expand Down
Loading
Loading