show RTL matchers migration, ditch .toBeTruthy()

Author: kettanaito

exercises/01.sunsetting-jsdom/01.problem.break-jsdom/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.7",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.0.6",

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

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/vitest'
 import { render, screen } from '@testing-library/react'
 
 test('displays the preview card', () => {
@@ -6,10 +7,10 @@ test('displays the preview card', () => {
 	// Provide a new `File` instance as the value of the `file` prop.
 	// 💰 new File(['hello world'], 'file.txt')
 	//
-	// 🐨 Write an assertion that expects the file name to be present
-	// in the DOM (you can use `.toBeTruthy()` for now).
+	// 🐨 Write an assertion that expects the file name to be visible.
 	// 💰 screen.getByText(expectedText)
+	// 💰 expect(element).toBeVisible()
 	//
 	// 🐨 Similarly, write another assertion that expects
-	// the file contents to be present in the DOM.
+	// the file contents to be visible for the user.
 })

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/README.mdx

@@ -24,8 +24,8 @@ Here, two things have my interest:
 I reflect those two expectations like so:
 
 ```tsx nonumber nocopy
-expect(screen.getByText('file.txt')).toBeTruthy()
-expect(screen.getByText('hello world')).toBeTruthy()
+expect(screen.getByText('file.txt')).toBeVisible()
+expect(screen.getByText('hello world')).toBeVisible()
 ```
 
 Looks like the first test is done. All that's left is to run via `npm test` and... Oh, no.

exercises/01.sunsetting-jsdom/01.solution.break-jsdom/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.7",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",

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

@@ -1,9 +1,10 @@
+import '@testing-library/jest-dom/vitest'
 import { render, screen } from '@testing-library/react'
 import { FilePreview } from './file-preview.tsx'
 
 test('displays the preview card', () => {
 	render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
 
-	expect(screen.getByText('file.txt')).toBeTruthy()
-	expect(screen.getByText('hello world')).toBeTruthy()
+	expect(screen.getByText('file.txt')).toBeVisible()
+	expect(screen.getByText('hello world')).toBeVisible()
 })

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

@@ -7,7 +7,7 @@ It's time to take the first step forward Vitest Browser Mode! In this one, you a
 As the first order of business, I'm going to uninstall the packages I won't be needing anymore:
 
 ```sh nonumber
-npm uninstall jsdom @testing-library/react
+npm uninstall jsdom @testing-library/react @testing-library/jest-dom/vitest
 ```
 
 > 🦉 I am uninstalling React Testing Library because I won't be using it directly for my in-browser tests. **That doesn't mean its API and practices are gone!** Instead, I will continue using them through the Vitest and Playwright APIs that are inspired by RTL and promote its best practices.

exercises/02.vitest-browser-mode/01.problem.installation-and-setup/src/file-preview.test.tsx

@@ -4,6 +4,6 @@ import { FilePreview } from './file-preview.tsx'
 test('displays the preview card', () => {
 	render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
 
-	expect(screen.getByText('file.txt')).toBeTruthy()
-	expect(screen.getByText('hello world')).toBeTruthy()
+	expect(screen.getByText('file.txt')).toBeVisible()
+	expect(screen.getByText('hello world')).toBeVisible()
 })

exercises/02.vitest-browser-mode/01.solution.installation-and-setup/src/file-preview.test.tsx

@@ -4,6 +4,6 @@ import { FilePreview } from './file-preview.tsx'
 test('displays the preview card', async () => {
 	render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
 
-	expect(screen.getByText('file.txt')).toBeTruthy()
-	expect(screen.getByText('hello world')).toBeTruthy()
+	expect(screen.getByText('file.txt')).toBeVisible()
+	expect(screen.getByText('hello world')).toBeVisible()
 })

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

@@ -15,9 +15,9 @@ test('displays the preview card', async () => {
 		// 🐨 Replace the `screen.getByText` function with
 		// `page.getByText`.
 		screen.getByText('file.txt'),
-	).toBeTruthy()
+	).toBeVisible()
 
 	// 🐨 Using the previous assertion as an example,
 	// apply the necessary changes to this `expect` as well.
-	expect(screen.getByText('hello world')).toBeTruthy()
+	expect(screen.getByText('hello world')).toBeVisible()
 })

exercises/02.vitest-browser-mode/02.solution.migrate-the-test/README.mdx

@@ -70,8 +70,8 @@ Finally, it's time to adjust the assertions around the elements rendered by our
 This is how they looked like before:
 
 ```tsx filename=file-preview.test.tsx nonumber
-expect(page.getByText('file.txt')).toBeTruthy()
-expect(page.getByText('hello world')).toBeTruthy()
+expect(page.getByText('file.txt')).toBeVisible()
+expect(page.getByText('hello world')).toBeVisible()
 ```
 
 There's a few things to change here.