Vitest 4.0 manual matcher types

[kentcdodds]

Update Vitest to v4.0 and remove manual matcher type imports.

Vitest v4.0 automatically includes browser matcher types via @vitest/browser/context, making explicit imports like @vitest/browser/matchers unnecessary. This PR updates Vitest and related browser dependencies to v4.0.17 and adjusts the TypeScript configuration and vite.config.ts files accordingly.

---

 

---

Note

Upgrade and config migration

• Bumps vitest and @vitest/browser to ^4.0.17 across exercises; adds @vitest/browser-playwright; updates root to include vitest
• Switches vite config refs to /// <reference types="vitest/config" /> and configures Playwright via import { playwright } from '@vitest/browser-playwright' with provider: playwright()
• Replaces manual matcher/provider types with "types": ["vitest/globals", "@vitest/browser/context"] in tsconfig.*.json

Docs and examples

• Updates READMEs to reflect Vitest v4 changes (use of browser context types, Playwright provider) and terminology shift from "workspaces" to "projects"
• Minor code tweaks (e.g., import.meta.env.DEV, setup file guidance) to align with new browser mode setup

^{Written by Cursor Bugbot for commit ea9e836. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[kentcdodds]

@kettanaito feel free to close this if it's not helpful. My prompt was:

Could you solve this: Vitest 4.0: Remove manual matcher types #9 #9

It did a lot more work than I expected, but upgrading to vitest 4 apparently required a bit more work than I expected.

[kentcdodds]

Problem is I think some of these changes would require video changes. Either that or you could add callouts in some key places to explain differences in the videos until you get around to updating them.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: Testing library incorrectly placed in production dependencies
  • Moved @vitest/browser from dependencies to devDependencies in both exercise 01 package.json files to match the pattern used in all other exercises.

[kettanaito]

@kentcdodds, shouldn't we leave the dependencies frozen though? As you pointed out, some updates will have to be reflected in the videos, for which I don't have the time at the moment.

I don't see workshops are guidebooks on particular tools. For example, whether we're using Vitest 3.0 or 4.0 is irrelevant to the topic of the workshop, that being in-browser component testing.

#9 I had was meant only for the Extras, not for the entire workshop. I have a designated extra materials that walk the students through 3.0 -> 4.0 migration without invalidating anything they've learned prior to that.

I'm going to close this!

[kettanaito]

Fixed it in #11.

[kentcdodds]

Ah perfect 👍👍

Love seeing you use that feature already!