03/01: use custom text context for the worker

Author: kettanaito

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

@@ -0,0 +1,26 @@
+import { test as testBase } from 'vitest'
+import { worker } from './src/mocks/browser.js'
+
+interface TestContext {
+	worker: typeof worker
+}
+
+export const test = testBase.extend<TestContext>({
+	worker: [
+		async ({}, use) => {
+			await worker.start({
+				quiet: true,
+				onUnhandledRequest(request, print) {
+					if (/(\.woff2?)$/.test(request.url)) {
+						return
+					}
+
+					print.error()
+				},
+			})
+			await use(worker)
+			worker.stop()
+		},
+		{ auto: true },
+	],
+})

exercises/03.best-practices/01.solution.network-mocking/src/discount-code-form.browser.test.tsx

@@ -3,33 +3,7 @@ import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
 import { DiscountCodeForm, type Discount } from './discount-code-form.js'
 
-import { worker } from './mocks/browser.js'
-
-beforeAll(async () => {
-	await worker.start({
-		quiet: true,
-		/**
-		 * @fixme @todo Better Vitest integration.
-		 * This has to be defined once for all tests.
-		 * Global setup can use `provide` but runs in Node.js.
-		 * Scoped setup can NOT use `provide` but runs in the browser.
-		 */
-		onUnhandledRequest(request, print) {
-			if (/(\.woff2?)$/.test(request.url)) {
-				return
-			}
-			print.warning()
-		},
-	})
-})
-
-afterEach(() => {
-	worker.resetHandlers()
-})
-
-afterAll(async () => {
-	worker.stop()
-})
+import { test } from '../my-test.js'
 
 test('applies a discount code', async () => {
 	render(<DiscountCodeForm />)
@@ -47,11 +21,11 @@ test('applies a discount code', async () => {
 		.toBeVisible()
 })
 
-test('displays a warning on legacy discount codes', async () => {
+test('displays a warning on legacy discount codes', async ({ worker }) => {
 	worker.use(
 		http.post<never, string, Discount>(
 			'https://api.example.com/discount/code',
-			async ({ request }) => {
+			async function override({ request }) {
 				const code = await request.text()
 
 				return HttpResponse.json({
@@ -90,7 +64,9 @@ test('displays a warning on legacy discount codes', async () => {
 		.toBeVisible()
 })
 
-test('displays an error when fetching the discount code', async () => {
+test('displays an error when fetching the discount code', async ({
+	worker,
+}) => {
 	worker.use(
 		http.post('https://api.example.com/discount/code', () => {
 			return new HttpResponse(null, { status: 500 })

exercises/03.best-practices/01.solution.network-mocking/tsconfig.node.json

@@ -4,6 +4,7 @@
 		"lib": ["ES2023"],
 		"module": "ESNext",
 		"skipLibCheck": true,
+		"types": ["vitest/globals"],
 
 		/* Bundler mode */
 		"moduleResolution": "bundler",