Skip to content

Commit 8d07db7

Browse files
kettanaitokettanaito
committed
02/02: add readmes
1 parent 1d367b4 commit 8d07db7

File tree

21 files changed

+415
-68
lines changed

21 files changed

+415
-68
lines changed

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Installation and setup
2+
3+
It's time to take the first step forward Vitest Browser Mode! In this one, you and I are going to install all the necessary dependencies so we can start testing our components in the actual browser.
4+
5+
## Install dependencies
6+
7+
As the first order of business, I'm going to uninstall the packages I won't be needing anymore:
8+
9+
```sh
10+
npm uninstall jsdom @testing-library/react
11+
```
12+
13+
> 🦉 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.
14+
15+
Now I can install the dependencies required for the Browser Mode in Vitest:
16+
17+
```sh
18+
npm i -D @vitest/browser vitest-browser-react playwright
19+
```
20+
21+
Let's break down what these packages do:
22+
23+
- [`@vitest/browser`](https://www.npmjs.com/package/@vitest/browser) enables the browser mode and provides the bindings to interact with the underlying browser;
24+
- [`vitest-browser-react`](https://www.npmjs.com/package/vitest-browser-react) provisions rendering of React components (similar to `@testing-library/react`);
25+
- [`playwright`](https://www.npmjs.com/package/playwright) will serve as the actual browser automation (a browser provider) that Vitest will use to run tests.
26+
27+
The installation step is done, and now it's time to configure Vitest is it can run my component tests in the actual browser.
28+
29+
## Configure Vitest
30+
31+
To enable the Browser Mode in Vitest, I need to set `test.browser.enabled` to `true` in my `vite.config.ts`/`vitest.config.ts`:
32+
33+
```ts filename=vite.config.ts add=9-11
34+
/// <reference types="vitest" />
35+
import { defineConfig } from 'vite'
36+
import react from '@vitejs/plugin-react'
37+
38+
export default defineConfig({
39+
plugins: [react()],
40+
test: {
41+
globals: true,
42+
browser: {
43+
enabled: true,
44+
},
45+
},
46+
})
47+
```
48+
49+
As the next step, I need to tell Vitest what browsers I want for testing my components. Let's use Chromium by setting the `test.browser.instances` correctly:
50+
51+
```ts filename=vite.config.ts add=10-14
52+
/// <reference types="vitest" />
53+
import { defineConfig } from 'vite'
54+
import react from '@vitejs/plugin-react'
55+
56+
export default defineConfig({
57+
plugins: [react()],
58+
test: {
59+
browser: {
60+
enabled: true,
61+
instances: [
62+
{
63+
browser: 'chromium',
64+
},
65+
],
66+
},
67+
},
68+
})
69+
```
70+
71+
> 🦉 You can configure _multiple browser instances_ to execute your component tests. This is handy for solid cross-browser code coverage.
72+
73+
// TODO: Mention `"types": ["@vitest/browser/providers/playwright"]` in `tsconfig.node.json` to have `.toBeVisible()` and other nice browser assertions!
74+
75+
This concludes the installation step!

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"type": "module",
3+
"name": "exercises_02.vitest-browser-mode_01.problem.installation-and-setup",
4+
"scripts": {
5+
"dev": "vite",
6+
"test": "vitest"
7+
},
8+
"dependencies": {
9+
"react": "^19.0.0",
10+
"react-dom": "^19.0.0"
11+
},
12+
"devDependencies": {
13+
"@testing-library/dom": "^10.4.0",
14+
"@testing-library/react": "^16.1.0",
15+
"@types/react": "^19.0.6",
16+
"@types/react-dom": "^19.0.3",
17+
"@vitejs/plugin-react": "^4.3.4",
18+
"autoprefixer": "^10.4.20",
19+
"jsdom": "^26.0.0",
20+
"postcss": "^8.4.49",
21+
"tailwindcss": "^3.4.17",
22+
"vite": "^6.0.7",
23+
"vitest": "^3.0.0-beta.4"
24+
}
25+
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/src/app.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from 'react'
2+
import { FilePreview } from './file-preview.jsx'
3+
4+
export function App() {
5+
const [file, setFile] = useState<File>()
6+
7+
return (
8+
<div>
9+
{file ? (
10+
<div className="flex flex-col items-center">
11+
<FilePreview file={file} />
12+
<button
13+
className="mt-10 rounded-full bg-slate-800 px-6 py-2 text-sm font-bold text-white hover:bg-slate-600"
14+
onClick={() => setFile(undefined)}
15+
>
16+
Preview another file
17+
</button>
18+
</div>
19+
) : (
20+
<div className="rounded-md border border-slate-200 bg-white p-4 shadow-lg shadow-slate-200">
21+
<input
22+
type="file"
23+
name="file"
24+
required
25+
className="text-sm font-medium"
26+
onChange={(event) => {
27+
const [selectedFile] = event.currentTarget.files || []
28+
29+
if (selectedFile) {
30+
setFile(selectedFile)
31+
}
32+
}}
33+
/>
34+
</div>
35+
)}
36+
</div>
37+
)
38+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { test, expect } from 'vitest'
2+
import { render, screen } from '@testing-library/react'
3+
import { FilePreview } from './file-preview.tsx'
4+
5+
test('displays the preview card', () => {
6+
render(<FilePreview file={new File(['hello world'], 'file.txt')} />)
7+
8+
expect(screen.getByText('file.txt')).toBeTruthy()
9+
expect(screen.getByText('hello world')).toBeTruthy()
10+
})

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useEffect, useState } from 'react'
2+
3+
export function FilePreview({ file }: { file: File }) {
4+
const [previewText, setPreviewText] = useState<string>()
5+
6+
useEffect(() => {
7+
file.text().then(setPreviewText)
8+
}, [file])
9+
10+
return (
11+
<div>
12+
<div className="w-full max-w-2xl overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg shadow-slate-200">
13+
<p className="border-b border-slate-200 bg-slate-50 px-4 py-2 font-bold text-slate-600">
14+
{file.name}
15+
</p>
16+
<pre className="max-h-[28ch] overflow-scroll p-4">{previewText}</pre>
17+
</div>
18+
</div>
19+
)
20+
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/src/index.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
2+
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
6+
7+
html {
8+
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9+
10+
font-family:
11+
'DM Sans',
12+
system-ui,
13+
-apple-system,
14+
BlinkMacSystemFont,
15+
'Segoe UI',
16+
Roboto,
17+
Oxygen,
18+
Ubuntu,
19+
Cantarell,
20+
'Open Sans',
21+
'Helvetica Neue',
22+
sans-serif;
23+
font-style: normal;
24+
font-optical-sizing: auto;
25+
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import './index.css'
4+
import { App } from './app.jsx'
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
)

0 commit comments

Comments
 (0)