update msw and simplify test/dev setups

Author: kettanaito

exercises/03.best-practices/03.problem.network-mocking/README.mdx

@@ -51,27 +51,9 @@ import { setupWorker } from 'msw/browser'
 import { handlers } from './handlers.js'
 
 export const worker = setupWorker(...handlers)
-
-export async function startWorker() {
-	await worker.start({
-		quiet: true,
-		onUnhandledRequest(request, print) {
-			if (/(\.(css|tsx?|woff2?))/.test(request.url)) {
-				return
-			}
-
-			print.error()
-		},
-	})
-}
 ```
 
-Let's briefly go over what's happening here:
-
-- The `setupWorker()` function prepares a Service Worker instance configured with the given request `handlers`. Note that it _doesn't start it_ just yet!
-- The `startWorker()` function abstracts starting the worker so we can potentially reuse it in multiple places.
-  - `quiet: true` disables MSW logging to keep our consoles clean.
-  - `onUnhandledRequest` decides how to handle requests that you don't have mocks for. In this case, we are ignoring any asset requests while reacting to any other unhandled requests with an error.
+> The `setupWorker()` function prepares a Service Worker instance configured with the given request `handlers`. Note that it _doesn't start_ the request interception just yet!
 
 After this step, you would normally introduce the `enableMocking()` function and wrap it around your application's initialization. With Vitest Browser Mode, the root of your app (`main.tsx`) doesn't run in tests so you need to start MSW differently.
 
@@ -85,11 +67,15 @@ Since it's a new TypeScript module, you need to tell TypeScript how to handle it
 
 🐨 In <InlineFile file="tsconfig.test.browser.json">`tsconfig.test.browser.json`</InlineFile>, add `"test-extend.ts"` to the `include` array:
 
-```json filename=tsconfig.test.browser.json remove=3 add=4
+```json filename=tsconfig.test.browser.json remove=3 add=4-8 highlight=7
 {
 	"extends": "./tsconfig.base.json",
-	"include": ["**/*.browser.test.ts*"],
-	"include": ["**/*.browser.test.ts*", "test-extend.ts"],
+	"include": ["vitest.browser.setup.ts", "**/*.browser.test.ts*"],
+	"include": [
+		"vitest.browser.setup.ts",
+		"**/*.browser.test.ts*",
+		"test-extend.ts"
+	],
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
@@ -130,14 +116,17 @@ Right now, the `worker` property has an array of two elements: `fixture` and `op
 
 🐨 Provide the following fixture for the `worker`:
 
-```ts filename=test-extend.ts add=2,6-10
+```ts filename=test-extend.ts add=2,6-13
 import { test as testBase } from 'vitest'
-import { startWorker, worker } from './src/mocks/browser.js'
+import { worker } from './src/mocks/browser.js'
 
 export const test = testBase.extend({
 	worker: [
 		async ({}, use) => {
-			await startWorker()
+			await worker.start({
+				quiet: true,
+				onUnhandledRequest: 'error',
+			})
 			await use(worker)
 			worker.stop()
 		},
@@ -146,7 +135,9 @@ export const test = testBase.extend({
 })
 ```
 
-In this fixture, you are telling Vitest to start the worker (`await startWorker()` from `src/mocks/browser.js` you've prepared earlier), then expose it to the test (`await use(worker)`), and finally call `worker.stop()` after the test is done.
+In this fixture, you are staring the MSW'w worker by calling `await worker.start()`. Here, you're providing `quiet: true` to disable MSW logging intercepted requests in the console during the test run to have a less noisy output, and also the `onUnhandledRequest: 'error'` option so the library errors if there are any requests in tests that you haven't handled.
+
+Then, you expose that `worker` reference so it can be accessed in tests (the `await use(worker)` part). And, finally, `worker.stop()` stops the mocking after the test has finished.
 
 🐨 To help Vitest understand the types of this `worker` fixture, annotate it explicitly by creating a new type called `TestContext`, describing the worker there, and providing it as a type argument to `test.extend()`:
 
@@ -174,14 +165,21 @@ You want MSW up and running _in every test_ so you can take advantage of its req
 
 🐨 To do that, configure the `worker` fixture to have the `auto: true` option:
 
-```ts filename=test-extend.ts add=11
+```ts filename=test-extend.ts add=18
 import { test as testBase } from 'vitest'
-import { startWorker, worker } from './src/mocks/browser.js'
+import { worker } from './src/mocks/browser.js'
 
-export const test = testBase.extend({
+type TestContext = {
+	worker: typeof worker
+}
+
+export const test = testBase.extend<TestContext>({
 	worker: [
 		async ({}, use) => {
-			await startWorker()
+			await worker.start({
+				quiet: true,
+				onUnhandledRequest: 'error',
+			})
 			await use(worker)
 			worker.stop()
 		},
@@ -218,7 +216,7 @@ This request handler will intercept any matching requests and execute the callba
 
 Our component expects a response from the server to have the following shape:
 
-```ts
+```ts nonumber
 {
 	code: string
 	amount: number

exercises/03.best-practices/03.solution.network-mocking/README.mdx

@@ -108,8 +108,8 @@ import { App } from './app.jsx'
 
 async function enableMocking() {
 	if (process.env.NODE_ENV === 'development') {
-		const { startWorker } = await import('./mocks/browser.js')
-		await startWorker()
+		const { worker } = await import('./mocks/browser.js')
+		await worker.start()
 	}
 }
 
@@ -127,7 +127,7 @@ enableMocking().then(() => {
 This functions does a couple of things:
 
 1. Imports the `./mocks/browser.js` module _conditionally_ to enable MSW only in development;
-1. Calls the `startWorker()` function to actually register and start the Service Worker. This is the same function you've used in `test-extend.ts`!
+1. Calls `await worker.start()` to actually register and start the Service Worker.
 
 ## Related materials
 

exercises/03.best-practices/03.solution.network-mocking/package.json

@@ -16,7 +16,7 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.0.5",
-    "msw": "^2.7.2",
+    "msw": "^2.7.3",
     "playwright": "^1.49.1",
     "tailwindcss": "^4.0.7",
     "vite": "^6.0.7",

exercises/03.best-practices/03.solution.network-mocking/src/main.tsx

@@ -5,8 +5,11 @@ import { App } from './app.jsx'
 
 async function enableMocking() {
 	if (process.env.NODE_ENV === 'development') {
-		const { startWorker } = await import('./mocks/browser.js')
-		await startWorker()
+		const { worker } = await import('./mocks/browser.js')
+
+		await worker.start({
+			onUnhandledRequest: 'warn',
+		})
 	}
 }
 

exercises/03.best-practices/03.solution.network-mocking/src/mocks/browser.ts

@@ -2,16 +2,3 @@ import { setupWorker } from 'msw/browser'
 import { handlers } from './handlers.js'
 
 export const worker = setupWorker(...handlers)
-
-export async function startWorker() {
-	await worker.start({
-		quiet: true,
-		onUnhandledRequest(request, print) {
-			if (/(\.(css|tsx?|woff2?))/.test(request.url)) {
-				return
-			}
-
-			print.error()
-		},
-	})
-}

exercises/03.best-practices/03.solution.network-mocking/test-extend.ts

@@ -1,5 +1,5 @@
 import { test as testBase } from 'vitest'
-import { startWorker, worker } from './src/mocks/browser.js'
+import { worker } from './src/mocks/browser.js'
 
 type TestContext = {
 	worker: typeof worker
@@ -8,7 +8,10 @@ type TestContext = {
 export const test = testBase.extend<TestContext>({
 	worker: [
 		async ({}, use) => {
-			await startWorker()
+			await worker.start({
+				quiet: true,
+				onUnhandledRequest: 'error',
+			})
 			await use(worker)
 			worker.stop()
 		},

exercises/03.best-practices/04.problem.element-presence/package.json

@@ -16,7 +16,7 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.0.5",
-    "msw": "^2.7.2",
+    "msw": "^2.7.3",
     "playwright": "^1.49.1",
     "tailwindcss": "^4.0.7",
     "vite": "^6.0.7",

exercises/03.best-practices/04.problem.element-presence/src/main.tsx

@@ -5,11 +5,10 @@ import { App } from './app.jsx'
 
 async function enableMocking() {
 	if (process.env.NODE_ENV === 'development') {
-		const { startWorker } = await import('./mocks/browser.js')
-		await startWorker()
+		const { worker } = await import('./mocks/browser.js')
+		await worker.start()
 	}
 }
-
 enableMocking().then(() => {
 	createRoot(document.getElementById('root')!).render(
 		<StrictMode>

exercises/03.best-practices/04.problem.element-presence/src/mocks/browser.ts

@@ -2,16 +2,3 @@ import { setupWorker } from 'msw/browser'
 import { handlers } from './handlers.js'
 
 export const worker = setupWorker(...handlers)
-
-export async function startWorker() {
-	await worker.start({
-		quiet: true,
-		onUnhandledRequest(request, print) {
-			if (/(\.(css|tsx?|woff2?))/.test(request.url)) {
-				return
-			}
-
-			print.error()
-		},
-	})
-}

exercises/03.best-practices/04.problem.element-presence/test-extend.ts

@@ -1,5 +1,5 @@
 import { test as testBase } from 'vitest'
-import { startWorker, worker } from './src/mocks/browser.js'
+import { worker } from './src/mocks/browser.js'
 
 type TestContext = {
 	worker: typeof worker
@@ -8,8 +8,10 @@ type TestContext = {
 export const test = testBase.extend<TestContext>({
 	worker: [
 		async ({}, use) => {
-			await startWorker()
-			worker.resetHandlers()
+			await worker.start({
+				quiet: true,
+				onUnhandledRequest: 'error',
+			})
 			await use(worker)
 			worker.stop()
 		},