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"]
 	}
 }

exercises/02.vitest-browser-mode/03.problem.playwright/README.mdx

@@ -20,7 +20,7 @@ In this workshop, we will be using Playwright as the browser provider for Vitest
 👨‍💼 Your task is to introduce Playwright to the existing Vitest setup. It will consist of multiple steps:
 
 1. Install `playwright` as a dependency in the project;
-1. Update `test.browser.provider` to use Playwright as the browser provider;
-1. Update `tsconfig.test.json` to use the type definitions from Playwright for `expect()` matchers.
+1. In <InlineFile file="vite.config.ts">`vite.config.ts`</InlineFile>, update `test.browser.provider` to use `'playwright'` as the browser provider;
+1. In <InlineFile file="tsconfig.test.json">`tsconfig.test.json`</InlineFile>, update the `compilerOptions.types` to include the Playwright type definitions for `expect()` matchers.
 
 Once you are done with it, make sure that the tests are still passing by running `npm test`. Good luck!

exercises/02.vitest-browser-mode/03.problem.playwright/tsconfig.test.json

@@ -4,6 +4,13 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "preserve",
-		"types": ["vitest/globals"]
+		"types": [
+			"vitest/globals",
+			// 💣 Remove the default browser matcher types.
+			"@vitest/browser/matchers"
+
+			// 🐨 Instead, include the matcher types from Playwright.
+			// 💰 "@vitest/browser/providers/playwright"
+		]
 	}
 }

exercises/02.vitest-browser-mode/03.problem.playwright/vite.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
 		globals: true,
 		browser: {
 			enabled: true,
+			// 🐨 Set a custom browser provider via the `provider` option.
+			// 💰 provider: 'playwright',
 			instances: [
 				{
 					browser: 'chromium',

exercises/02.vitest-browser-mode/04.problem.shared-assets/README.mdx

@@ -16,9 +16,21 @@ I think this is a great problem for you to fix!
 
 👨‍💼 In this exercise, you will create a custom browser setup file that will run as a global setup for all component tests.
 
-First, create a <InlineFile file="vitest.browser.setup.ts">`vitest.browser.setup.ts`</InlineFile> file. In that file, import any assets you wish to apply to _all tests_ (e.g. CSS).
+🐨 First, create a <InlineFile file="vitest.browser.setup.ts">`vitest.browser.setup.ts`</InlineFile> file. In that file, import any assets you wish to apply to _all tests_ (e.g. `./src/index.css`).
 
-> 🦉 To make Vite process the browser setup file like it does the rest of the app, include the following type reference at the top of the setup file: `/// <reference path="./src/vite-env.d.ts" />`.
+🐨 Enable TypeScript for the new file by adding it to the `include` array in <InlineFile file="tsconfig.node.json">`tsconfig.node.json`</InlineFile>.
+
+Once you do all this, you will spot that the `*.css` imports fail to resolve in TypeScript.
+
+```txt nonumber nocopy
+Cannot find module './src/index.css' or its corresponding type declarations.ts(2307)
+```
+
+🐨 To fix this, we need to pull some of the Vite built-in type definitions to help us. At the top of the `vitest.browser.setup.ts` file, add the following type reference comment:
+
+```ts nonumber
+/// <reference path="./src/vite-env.d.ts" />
+```
 
 Lastly, provide the path to the setup file in <InlineFile file="vite.config.ts">`vite.config.ts`</InlineFile> as the `setupFiles` value of a conrete browser instance (follow the instructions in the configuration file for more details).
 

exercises/02.vitest-browser-mode/04.problem.shared-assets/vite.config.ts#3:5

@@ -4,6 +4,35 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig({
 	plugins: [react()],
+	// 🐨 Add a new property called `workspace`.
+	// As the value, provide an array with two entries.
+	// 💰 workspace: [{}, {}]
+	//
+	// 🐨 In the first entry of the `workspace` array,
+	// define a `test` property and give it a `test.name` equal to "unit".
+	// 💰 { test: { name: 'unit' } }
+	//
+	// 🐨 In the unit test workspace, set `globals` to true
+	// and `environment` to "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.
+	//
+	// 🐨 Now, switch to the second entry in the `workspace`
+	// array. There, give it the following properties:
+	// {
+	//   name: "browser",
+	//   globals: true,
+	//   include: ["**/*.browser.test.ts(x)?"]
+	// }
+	//
+	// 🐨 Finally, copy the existing `browser` configuration
+	// under the `test` property of the second workspace.
+	// 💰 { test: { name: 'browser', browser: {...} }}
+	//
+	// 💣 Delete this root-level `test` property altogether.
 	test: {
 		globals: true,
 		browser: {