remove @testing-library/* from irrelevant exercises

kettanaito · kettanaito · commit f904243e2abc · 2025-02-14T12:05:20.000+01:00
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
@@ -10,7 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -10,7 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/exercises/02.vitest-browser-mode/03.problem.playwright/package.json b/exercises/02.vitest-browser-mode/03.problem.playwright/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/exercises/02.vitest-browser-mode/03.solution.playwright/package.json b/exercises/02.vitest-browser-mode/03.solution.playwright/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
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
@@ -12,8 +12,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/01.problem.accessibility-selectors/package.json b/exercises/03.best-practices/01.problem.accessibility-selectors/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/01.problem.accessibility-selectors/src/discount-code-form.browser.test.tsx b/exercises/03.best-practices/01.problem.accessibility-selectors/src/discount-code-form.browser.test.tsx
@@ -10,11 +10,11 @@ test('renders the discount form', async () => {
 	// 💰 const discountInput = page.getByLabelText(labelText)
 	//
 	// 🐨 Write an assertion that the `discountInput` element is visible.
-	// 💰 expect.element(locator).toBeVisible()
+	// 💰 await expect.element(locator).toBeVisible()
 	//
 	// 🐨 Create a new variable called `applyDiscountButton` and assign it
 	// the result of locating the element by role 'button' and accessible name
-	// 'Apply discount'.
+	// "Apply discount".
 	// 💰 const applyDiscountButton = page.getByRole(role, { name: accessibleName })
 	//
 	// 🐨 Finally, write another assertion that the apply discount button is visible.
diff --git a/exercises/03.best-practices/01.solution.accessibility-selectors/package.json b/exercises/03.best-practices/01.solution.accessibility-selectors/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/02.problem.user-events/package.json b/exercises/03.best-practices/02.problem.user-events/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/02.solution.user-events/package.json b/exercises/03.best-practices/02.solution.user-events/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/03.problem.network-mocking/README.mdx b/exercises/03.best-practices/03.problem.network-mocking/README.mdx
@@ -38,7 +38,13 @@ npm install -D msw
 npx msw init ./public
 ```
 
-🐨 Create a browser integration file at <InlineFile file="./src/mocks/browser.ts">`src/mocks/browser.ts`</InlineFile>. Feel free to paste the following content there:
+🐨 Create a new folder in `src` called `mocks`. In `src/mocks`, create a new file called `handlers.ts`. For now, let it export a single empty array called `handlers`:
+
+```ts filename=src/mocks/handlers.ts
+export const handlers = []
+```
+
+🐨 Next, create a browser integration file at <InlineFile file="./src/mocks/browser.ts">`src/mocks/browser.ts`</InlineFile>. Feel free to paste the following content there:
 
 ```ts filename=src/mocks/browser.ts
 import { setupWorker } from 'msw/browser'
@@ -75,6 +81,25 @@ For that, you will use a _custom test context_.
 
 🐨 Create a new file called <InlineFile file="./test-extend.ts">`test-extend.ts`</InlineFile>.
 
+Since it's a new TypeScript module, you need to tell TypeScript how to handle it. Right now, no configurations include this module so writing any code there will error.
+
+🐨 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
+{
+	"extends": "./tsconfig.base.json",
+	"include": ["**/*.browser.test.ts*"],
+	"include": ["**/*.browser.test.ts*", "test-extend.ts"],
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "preserve",
+		"types": ["vitest/globals", "@vitest/browser/providers/playwright"]
+	}
+}
+```
+
+> We are adding it to the configuration for browser tests because the code in `test-extend.ts` will run in the browser.
+
 🐨 In `test-extend.ts`, import `test as testBase` from `vitest`:
 
 ```ts filename=test-extend.ts add=1
@@ -161,7 +186,7 @@ With the setup finally done, let's move on to describing the network.
 
 ### Describing the network
 
-🐨 Next, create a new file called <InlineFile file="./src/mocks/handlers.ts">`src/mocks/handlers.ts`</InlineFile>. You will describe the network behaviors you want here. In that file, import `http` and `HttpResponse` from `msw`:
+🐨 Head back to `src/mocks/handlers.ts`. In this file, you will describe the network behaviors you want here. Import `http` and `HttpResponse` from `msw`:
 
 ```ts filename=src/mocks/handlers.ts add=1
 import { http, HttpResponse } from 'msw'
diff --git a/exercises/03.best-practices/03.problem.network-mocking/package.json b/exercises/03.best-practices/03.problem.network-mocking/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/03.solution.network-mocking/package.json b/exercises/03.best-practices/03.solution.network-mocking/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/03.solution.network-mocking/tsconfig.test.browser.json b/exercises/03.best-practices/03.solution.network-mocking/tsconfig.test.browser.json
@@ -1,6 +1,6 @@
 {
 	"extends": "./tsconfig.base.json",
-	"include": ["**/*.browser.test.ts*"],
+	"include": ["**/*.browser.test.ts*", "test-extend.ts"],
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
diff --git a/exercises/03.best-practices/04.problem.element-presence/package.json b/exercises/03.best-practices/04.problem.element-presence/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/04.solution.element-presence/package.json b/exercises/03.best-practices/04.solution.element-presence/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/05.problem.page-navigation/package.json b/exercises/03.best-practices/05.problem.page-navigation/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/exercises/03.best-practices/05.solution.page-navigation/package.json b/exercises/03.best-practices/05.solution.page-navigation/package.json
@@ -10,8 +10,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "./tsconfig.base.json",`
`3`		`- "include": ["*/.browser.test.ts*"],`
	`3`	`+ "include": ["*/.browser.test.ts*", "test-extend.ts"],`
`4`	`4`	`"compilerOptions": {`
`5`	`5`	`"target": "esnext",`
`6`	`6`	`"module": "preserve",`