Vitest 4.0 manual matcher types

exercises/01.sunsetting-jsdom/01.problem.break-jsdom/package.json

@@ -19,9 +19,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "jsdom": "^26.0.0",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/01.sunsetting-jsdom/01.problem.break-jsdom/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/01.sunsetting-jsdom/01.problem.break-jsdom/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/package.json

@@ -18,9 +18,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "jsdom": "^26.0.0",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/README.mdx

@@ -32,7 +32,7 @@ The installation step is done, and now it's time to configure Vitest is it can r
 To enable the Browser Mode in Vitest, I need to set `test.browser.enabled` to `true` in my `vite.config.ts`/`vitest.config.ts`:
 
 ```ts filename=vite.config.ts remove=10 add=11-13
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -52,7 +52,7 @@ export default defineConfig({
 As the next step, I need to tell Vitest what browsers I want for testing my components. Let's use Chromium by setting the `test.browser.instances` correctly:
 
 ```ts filename=vite.config.ts add=11-15
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -76,27 +76,23 @@ export default defineConfig({
 
 ## Configure TypeScript
 
-The last thing that remains is to extend the TypeScript configuration to recognize DOM-specific matches, like `expect().toBeVisible()` as they come built-in in Vitest.
+The last thing that remains is to make sure TypeScript sees the Vitest globals and browser context types.
 
 First, I will remove the `import '@testing-library/jest-dom/vitest'` import we previously had in the test:
 
 ```tsx filename=file-preview.test.tsx remove=1
 import '@testing-library/jest-dom/vitest'
 ```
 
-And replace it with a type reference to Vitest's browser matchers in `tsconfig.test.json`:
+Finally, confirm that `tsconfig.test.json` includes `vitest/globals` and `@vitest/browser/context` in `compilerOptions.types`:
 
 ```json filename=tsconfig.test.json add=9
 {
 	"extends": "./tsconfig.app.json",
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": [
-			"vitest/globals",
-			// 👇
-			"@vitest/browser/matchers"
-		]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }
 ```

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/package.json

@@ -17,10 +17,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.5",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "jsdom": "^26.0.0",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "vitest": "^4.0.17"
   }
 }

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/02.vitest-browser-mode/01.solution.installation-and-setup/package.json

@@ -15,10 +15,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0",
+    "vitest": "^4.0.17",
     "vitest-browser-react": "^0.2.0"
   }
 }

exercises/02.vitest-browser-mode/01.solution.installation-and-setup/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals", "@vitest/browser/matchers"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/02.vitest-browser-mode/01.solution.installation-and-setup/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/02.vitest-browser-mode/02.problem.migrate-the-test/package.json

@@ -15,10 +15,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0",
+    "vitest": "^4.0.17",
     "vitest-browser-react": "^0.2.0"
   }
 }

exercises/02.vitest-browser-mode/02.problem.migrate-the-test/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals", "@vitest/browser/matchers"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/02.vitest-browser-mode/02.problem.migrate-the-test/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/02.vitest-browser-mode/02.solution.migrate-the-test/package.json

@@ -15,9 +15,10 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/02.vitest-browser-mode/02.solution.migrate-the-test/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals", "@vitest/browser/matchers"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/02.vitest-browser-mode/02.solution.migrate-the-test/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

exercises/02.vitest-browser-mode/03.problem.playwright/README.mdx

@@ -21,8 +21,8 @@ In this workshop, we will be using Playwright as the browser provider for Vitest
 
 👨‍💼 Your task is to introduce Playwright to the existing Vitest setup. It will consist of multiple steps:
 
-1. Install `playwright` as a dependency in the project;
-1. In <InlineFile file="vite.config.ts">`vite.config.ts`</InlineFile>, update `test.browser.provider` to use `'playwright'` as the browser provider;
-1. In <InlineFile file="tsconfig.test.json">`tsconfig.test.json`</InlineFile>, update the `compilerOptions.types` to include the Playwright type definitions for `expect()` matchers.
+1. Install `playwright` and `@vitest/browser-playwright` as dependencies in the project;
+1. In <InlineFile file="vite.config.ts">`vite.config.ts`</InlineFile>, import `playwright` from `@vitest/browser-playwright` and set `test.browser.provider` to `playwright()`;
+1. In <InlineFile file="tsconfig.test.json">`tsconfig.test.json`</InlineFile>, update the `compilerOptions.types` to include the Vitest browser context types.
 
 Once you are done with it, make sure that the tests are still passing by running `npm test`. Good luck!

exercises/02.vitest-browser-mode/03.problem.playwright/package.json

@@ -15,9 +15,10 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/02.vitest-browser-mode/03.problem.playwright/tsconfig.test.json

@@ -5,11 +5,7 @@
 	"compilerOptions": {
 		"types": [
 			"vitest/globals",
-			// 💣 Remove the default browser matcher types.
-			"@vitest/browser/matchers"
-
-			// 🐨 Instead, include the matcher types from Playwright.
-			// 💰 "@vitest/browser/providers/playwright"
+			"@vitest/browser/context"
 		]
 	}
 }

exercises/02.vitest-browser-mode/03.problem.playwright/vite.config.ts

@@ -1,5 +1,6 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
+import { playwright } from '@vitest/browser-playwright'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -13,7 +14,7 @@ export default defineConfig({
 		browser: {
 			enabled: true,
 			// 🐨 Set a custom browser provider via the `provider` option.
-			// 💰 provider: 'playwright',
+			// 💰 provider: playwright(),
 			instances: [
 				{
 					browser: 'chromium',

exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx

@@ -2,10 +2,10 @@
 
 <EpicVideo url="https://www.epicweb.dev/workshops/react-component-testing-with-vitest/vitest-browser-mode/playwright/solution" />
 
-Let's start by installing `playwright`:
+Let's start by installing `playwright` and the Vitest Playwright provider:
 
 ```sh nonumber
-npm i -D playwright
+npm i -D playwright @vitest/browser-playwright
 ```
 
 Playwright needs browser executables to be present on your machine to run. In this workshop, I am using Chromium as my browser of choice, so I can install just that particular browser by running the following command:
@@ -16,11 +16,12 @@ npx playwright install --with-deps chromium
 
 > 🦉 You can provide the Playwright CLI with a specific browser you want to be installed. This reduces its footprint in the system by fetching only the browsers you need.
 
-The next step is to tell Vitest to use Playwright as the browser provider for component tests. In `vite.config.ts`, set the `test.browser.provider` option to `'playwright'`:
+The next step is to tell Vitest to use Playwright as the browser provider for component tests. In `vite.config.ts`, import `playwright` from `@vitest/browser-playwright` and set `test.browser.provider` to `playwright()`:
 
 ```ts filename=vite.config.ts add=12
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
+import { playwright } from '@vitest/browser-playwright'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -30,7 +31,7 @@ export default defineConfig({
 		globals: true,
 		browser: {
 			enabled: true,
-			provider: 'playwright',
+			provider: playwright(),
 			instances: [
 				{
 					browser: 'chromium',
@@ -41,7 +42,7 @@ export default defineConfig({
 })
 ```
 
-And, finally, let's update the type definitions for the assertion matchers to be those from Playwright in `tsconfig.test.json`:
+And, finally, let's add the Vitest browser context types in `tsconfig.test.json`:
 
 ```json filename=tsconfig.test.json remove=9 add=10
 {
@@ -52,8 +53,7 @@ And, finally, let's update the type definitions for the assertion matchers to be
 		"module": "preserve",
 		"types": [
 			"vitest/globals",
-			"@vitest/browser/matchers",
-			"@vitest/browser/providers/playwright"
+			"@vitest/browser/context"
 		]
 	}
 }

exercises/02.vitest-browser-mode/03.solution.playwright/package.json

@@ -15,10 +15,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "playwright": "^1.49.1",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/02.vitest-browser-mode/03.solution.playwright/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals", "@vitest/browser/providers/playwright"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }

exercises/02.vitest-browser-mode/03.solution.playwright/vite.config.ts

@@ -1,5 +1,6 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
+import { playwright } from '@vitest/browser-playwright'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -12,7 +13,7 @@ export default defineConfig({
 		globals: true,
 		browser: {
 			enabled: true,
-			provider: 'playwright',
+			provider: playwright(),
 			instances: [
 				{
 					browser: 'chromium',

exercises/02.vitest-browser-mode/04.problem.shared-assets/package.json

@@ -15,10 +15,11 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
     "playwright": "^1.49.1",
     "tailwindcss": "^4.0.11",
     "vite": "^6.2.0",
-    "vitest": "^3.2.0"
+    "vitest": "^4.0.17"
   }
 }

exercises/02.vitest-browser-mode/04.problem.shared-assets/tsconfig.test.json

@@ -3,6 +3,6 @@
 	"include": ["src/**/*", "src/**/*.test.ts*"],
 	"exclude": [],
 	"compilerOptions": {
-		"types": ["vitest/globals", "@vitest/browser/providers/playwright"]
+		"types": ["vitest/globals", "@vitest/browser/context"]
 	}
 }