address exercise feedback

Author: kettanaito

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/src/file-preview.test.tsx

@@ -1,4 +1,3 @@
-import { test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { FilePreview } from './file-preview.tsx'
 

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

@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["@vitest/browser/providers/playwright"]
+		"types": ["vitest/globals"]
 	}
 }

exercises/01.sunsetting-jsdom/01.solution.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',
 	},
 })

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

@@ -29,7 +29,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 add=9-11
+```ts filename=vite.config.ts remove=9 add=10-12
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
@@ -38,6 +38,7 @@ export default defineConfig({
 	plugins: [react()],
 	test: {
 		globals: true,
+		environment: 'jsdom',
 		browser: {
 			enabled: true,
 		},

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

@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["@vitest/browser/providers/playwright"]
+		"types": ["vitest/globals", "@vitest/browser/matchers"]
 	}
 }

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

@@ -1,6 +1,14 @@
 # Installation and setup
 
-That's it! :tada: You have everything you need to finally start testing my browser code in the browser. Now, it's time to refactor the existing test to leverage the beauty of Vitest Browser Mode.
+That's it! :tada: You have everything you need to finally start testing your browser code in the browser.
+
+If you try running tests right now, you will get an error:
+
+```txt nonumber nocopy
+TestingLibraryElementError: Unable to find an element with the text: hello world. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+```
+
+This is because you have to refactor your test suite to correctly render your component in the browser. This is exactly what you are going to do in the next exercise.
 
 ## Related materials
 

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

@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/matchers"]
 	}
 }

exercises/02.vitest-browser-mode/02.problem.migrate-the-test/src/file-preview.test.tsx

@@ -1,6 +1,6 @@
 // 💣 Remove the import from `@testing-library/react`. You won't need it anymore.
 import { render, screen } from '@testing-library/react'
-// 🐨 Import `page` from '@vitest/browser'
+// 🐨 Import `page` from '@vitest/browser/context'
 // 💰 import { foo } from 'bar'
 //
 // 🐨 Import `render` from 'vitest-browser-react'.
@@ -10,7 +10,7 @@ import { FilePreview } from './file-preview.tsx'
 test('displays the preview card', async () => {
 	render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
 
-	// 🐨 Replace `expect()` with `expect.element()`.
+	// 🐨 Replace `expect()` with `await expect.element()`.
 	expect(
 		// 🐨 Replace the `screen.getByText` function with
 		// `page.getByText`.

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

@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/matchers"]
 	}
 }

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

@@ -4,6 +4,6 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "@vitest/browser/matchers"]
 	}
 }