Merge branch 'main' into aaronmcadam/typos-grammar-2

aaronmcadam · web-flow · commit 023445d11175 · 2025-02-18T21:07:33.000Z
diff --git a/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/package.json b/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_01.sunsetting-jsdom_01.problem.break-jsdom",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/src/file-preview.test.tsx b/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/src/file-preview.test.tsx
@@ -1,4 +1,3 @@
-import { test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 test('displays the preview card', () => {
diff --git a/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/tsconfig.test.json b/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/tsconfig.test.json
@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["@vitest/browser/providers/playwright"]
+		"types": ["vitest/globals"]
 	}
 }
diff --git a/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/vite.config.ts b/exercises/01.sunsetting-jsdom/01.problem.break-jsdom/vite.config.ts
@@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
 	plugins: [react()],
 	test: {
+		globals: true,
 		environment: 'jsdom',
 	},
 })
diff --git a/exercises/01.sunsetting-jsdom/01.solution.break-jsdom/package.json b/exercises/01.sunsetting-jsdom/01.solution.break-jsdom/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_01.sunsetting-jsdom_01.solution.break-jsdom",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/01.problem.installation-and-setup/package.json b/exercises/02.vitest-browser-mode/01.problem.installation-and-setup/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_01.problem.installation-and-setup",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/01.solution.installation-and-setup/package.json b/exercises/02.vitest-browser-mode/01.solution.installation-and-setup/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_01.solution.installation-and-setup",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/02.problem.migrate-the-test/package.json b/exercises/02.vitest-browser-mode/02.problem.migrate-the-test/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_02.problem.migrate-the-test",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/02.solution.migrate-the-test/package.json b/exercises/02.vitest-browser-mode/02.solution.migrate-the-test/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_02.solution.migrate-the-test",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/03.problem.playwright/package.json b/exercises/02.vitest-browser-mode/03.problem.playwright/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_03.problem.playwright",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx b/exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx
@@ -1,9 +1,5 @@
 # Playwright
 
-Problem: Using the default `preview` provider in Vitest is great to try things out, but it relies on Chromium being installed on your system (and also isn't that powerful). To have a proper setup, and be able to run it in CI, we need to define an explicit provider. Let's use Playwright.
-
----
-
 Let's start by installing `playwright`:
 
 ```sh nonumber
diff --git a/exercises/02.vitest-browser-mode/03.solution.playwright/package.json b/exercises/02.vitest-browser-mode/03.solution.playwright/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_03.solution.playwright",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/04.problem.shared-assets/package.json b/exercises/02.vitest-browser-mode/04.problem.shared-assets/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_04.problem.shared-assets",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/04.solution.shared-assets/package.json b/exercises/02.vitest-browser-mode/04.solution.shared-assets/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_04.solution.shared-assets",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/05.problem.multiple-workspaces/package.json b/exercises/02.vitest-browser-mode/05.problem.multiple-workspaces/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_05.problem.multiple-workspaces",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/02.vitest-browser-mode/05.problem.multiple-workspaces/vite.config.ts b/exercises/02.vitest-browser-mode/05.problem.multiple-workspaces/vite.config.ts
@@ -1,5 +1,7 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+// 🐨 Import `defaultConfig` from `vitest/config`
+// 💰 import { foo } from 'bar'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -14,11 +16,19 @@ export default defineConfig({
 	//
 	// 🐨 In the unit test workspace, set `globals` to true
 	// and `environment` to "node".
+	// 💰 globals: true
+	// 💰 environment: 'node'
 	//
-	// 🐨 Finally, declare `include` and `exclude` properties
-	// that decide which test suites to run.
-	// Use the "**/*.test.ts" pattern for `include`
-	// and "**/*.browser.test.ts(x)?" pattern for `exclude.
+	// 🐨 Add the `include` property and set it to an array
+	// with the only entry "**/*.test.ts".
+	//
+	// 🐨 Since "**/*.test.ts" will match ALL tests, exclude
+	// the browser tests by providing the `exclude` property
+	// and including the browser test pattern there.
+	// 🦉 Vitest workspaces override the default configuration,
+	// which means that the `exclude` array must include the
+	// default values to ignore tests from `node_modules`, for example.
+	// 💰 exclude: [...defaultConfig.exclude, '**/*.browser.test.ts(x)?']
 	//
 	// 🐨 Now, switch to the second entry in the `workspace`
 	// array. There, give it the following properties:
diff --git a/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/README.mdx b/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/README.mdx
@@ -12,9 +12,10 @@ Workspaces are listed in the `test.workspace` property in your Vitest config, an
 
 I will define two workspaces:
 
-```ts filename=vite.config.ts add=10-16,19-34
+```ts filename=vite.config.ts add=11-17,20-35
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -26,7 +27,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/package.json b/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_02.vitest-browser-mode_05.solution.multiple-workspaces",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest",
     "test:unit": "vitest --project=unit",
     "test:integration": "vitest --project=browser"
diff --git a/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/vite.config.ts b/exercises/02.vitest-browser-mode/05.solution.multiple-workspaces/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/01.problem.accessibility-selectors/package.json b/exercises/03.best-practices/01.problem.accessibility-selectors/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_01.problem.accessibility-selectors",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/01.problem.accessibility-selectors/vite.config.ts b/exercises/03.best-practices/01.problem.accessibility-selectors/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/01.solution.accessibility-selectors/package.json b/exercises/03.best-practices/01.solution.accessibility-selectors/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_01.solution.accessibility-selectors",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/01.solution.accessibility-selectors/vite.config.ts b/exercises/03.best-practices/01.solution.accessibility-selectors/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/02.problem.user-events/package.json b/exercises/03.best-practices/02.problem.user-events/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_02.problem.user-events",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/02.problem.user-events/vite.config.ts b/exercises/03.best-practices/02.problem.user-events/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/02.solution.user-events/package.json b/exercises/03.best-practices/02.solution.user-events/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_02.solution.user-events",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/02.solution.user-events/vite.config.ts b/exercises/03.best-practices/02.solution.user-events/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/03.problem.network-mocking/package.json b/exercises/03.best-practices/03.problem.network-mocking/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_03.problem.network-mocking",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/03.problem.network-mocking/vite.config.ts b/exercises/03.best-practices/03.problem.network-mocking/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/03.solution.network-mocking/package.json b/exercises/03.best-practices/03.solution.network-mocking/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_03.solution.network-mocking",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/03.solution.network-mocking/vite.config.ts b/exercises/03.best-practices/03.solution.network-mocking/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/04.problem.element-presence/package.json b/exercises/03.best-practices/04.problem.element-presence/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_04.problem.element-presence",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/04.problem.element-presence/vite.config.ts b/exercises/03.best-practices/04.problem.element-presence/vite.config.ts
@@ -1,5 +1,6 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
@@ -11,7 +12,7 @@ export default defineConfig({
 					name: 'unit',
 					globals: true,
 					include: ['**/*.test.ts'],
-					exclude: ['**/*.browser.test.ts(x)?'],
+					exclude: [...configDefaults.exclude, '**/*.browser.test.ts(x)?'],
 					environment: 'node',
 				},
 			},
diff --git a/exercises/03.best-practices/04.solution.element-presence/package.json b/exercises/03.best-practices/04.solution.element-presence/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "exercises_03.best-practices_04.solution.element-presence",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4000",
     "test": "vitest"
   },
   "dependencies": {
diff --git a/exercises/03.best-practices/04.solution.element-presence/vite.config.ts b/exercises/03.best-practices/04.solution.element-presence/vite.config.ts
diff --git a/exercises/03.best-practices/05.problem.page-navigation/package.json b/exercises/03.best-practices/05.problem.page-navigation/package.json
diff --git a/exercises/03.best-practices/05.problem.page-navigation/src/discount-code-form.tsx b/exercises/03.best-practices/05.problem.page-navigation/src/discount-code-form.tsx
diff --git a/exercises/03.best-practices/05.problem.page-navigation/src/main.tsx b/exercises/03.best-practices/05.problem.page-navigation/src/main.tsx
diff --git a/exercises/03.best-practices/05.problem.page-navigation/vite.config.ts b/exercises/03.best-practices/05.problem.page-navigation/vite.config.ts
diff --git a/exercises/03.best-practices/05.solution.page-navigation/package.json b/exercises/03.best-practices/05.solution.page-navigation/package.json
diff --git a/exercises/03.best-practices/05.solution.page-navigation/vite.config.ts b/exercises/03.best-practices/05.solution.page-navigation/vite.config.ts
diff --git a/exercises/04.debugging/01.problem.dom-snapshots/package.json b/exercises/04.debugging/01.problem.dom-snapshots/package.json
diff --git a/exercises/04.debugging/01.problem.dom-snapshots/vite.config.ts b/exercises/04.debugging/01.problem.dom-snapshots/vite.config.ts
diff --git a/exercises/04.debugging/01.solution.dom-snapshots/package.json b/exercises/04.debugging/01.solution.dom-snapshots/package.json
diff --git a/exercises/04.debugging/01.solution.dom-snapshots/vite.config.ts b/exercises/04.debugging/01.solution.dom-snapshots/vite.config.ts
diff --git a/exercises/04.debugging/02.problem.debugger/package.json b/exercises/04.debugging/02.problem.debugger/package.json
diff --git a/exercises/04.debugging/02.solution.debugger/package.json b/exercises/04.debugging/02.solution.debugger/package.json
diff --git a/exercises/04.debugging/03.problem.breakpoints/package.json b/exercises/04.debugging/03.problem.breakpoints/package.json
diff --git a/exercises/04.debugging/03.solution.breakpoints/package.json b/exercises/04.debugging/03.solution.breakpoints/package.json
diff --git a/exercises/04.debugging/04.problem.debug-console/package.json b/exercises/04.debugging/04.problem.debug-console/package.json
diff --git a/exercises/04.debugging/04.solution.debug-console/package.json b/exercises/04.debugging/04.solution.debug-console/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { test, expect } from 'vitest'`
`2`	`1`	`import { render, screen } from '@testing-library/react'`
`3`	`2`
`4`	`3`	`test('displays the preview card', () => {`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@`
`4`	`4`	`"compilerOptions": {`
`5`	`5`	`"target": "esnext",`
`6`	`6`	`"module": "preserve",`
`7`		`- "types": ["@vitest/browser/providers/playwright"]`
	`7`	`+ "types": ["vitest/globals"]`
`8`	`8`	`}`
`9`	`9`	`}`