You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+21-5
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,8 @@
2
2
3
3
Render React components in Vitest Browser Mode. This library follows `testing-library` principles and exposes only [locators](https://vitest.dev/guide/browser/locators) and utilities that encourage you to write tests that closely resemble how your React components are used.
4
4
5
+
`vitest-browser-react` aims to deliver a good developer experience in Vitest Browser Mode by incorporating the [locators API](https://vitest.dev/guide/browser/locators.html) and [retry-ability](https://vitest.dev/guide/browser/assertion-api.html) mechanism directly into the `render` result. This allows you to call user methods without needing to verify the element's existence or wait for external events (like API calls) to render the element.
6
+
5
7
Requires `vitest` and `@vitest/browser` 2.1.0 or higher.
6
8
7
9
```tsx
@@ -28,16 +30,17 @@ import { defineConfig } from 'vitest/config'
28
30
29
31
exportdefaultdefineConfig({
30
32
test: {
31
-
// if the types are not picked up, add `vitest-browser-react` to
32
-
// "compilerOptions.types" in your tsconfig or
33
-
// import `vitest-browser-react` manually so TypeScript can pick it up
34
-
setupFiles: ['vitest-browser-react'],
33
+
setupFiles: ['./setup-file.ts'],
35
34
browser: {
36
35
name: 'chromium',
37
36
enabled: true,
38
37
},
39
38
},
40
39
})
40
+
41
+
// ./setup-file.ts
42
+
// add an import at the top of your setup file so TypeScript can pick up types
Unlike `@testing-library/react`, `vitest-browser-react` cleans up the component before the test starts instead of after, so you can see the rendered result in your UI. To avoid auto-cleanup, import the `render` function from `vitest-browser-react/pure`.
56
+
Unlike `@testing-library/react`, `vitest-browser-react` performs cleanup of the component before the test begins, allowing you to see the rendered result in your UI. If you prefer to disable auto-cleanup, you can import the `render` function from `vitest-browser-react/pure`.
57
+
58
+
## Configuration
59
+
60
+
You can configure if the component should be rendered in Strict Mode with `configure` method from `vitest-browser-react/pure`:
0 commit comments