Skip to content

Commit 5286a3c

Browse files
committed
fix: add configuration section
Fixes #4
1 parent 11bbd11 commit 5286a3c

File tree

2 files changed

+22
-5
lines changed

2 files changed

+22
-5
lines changed

README.md

+21-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
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.
44

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+
57
Requires `vitest` and `@vitest/browser` 2.1.0 or higher.
68

79
```tsx
@@ -28,16 +30,17 @@ import { defineConfig } from 'vitest/config'
2830

2931
export default defineConfig({
3032
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'],
3534
browser: {
3635
name: 'chromium',
3736
enabled: true,
3837
},
3938
},
4039
})
40+
41+
// ./setup-file.ts
42+
// add an import at the top of your setup file so TypeScript can pick up types
43+
import 'vitest-browser-react'
4144
```
4245

4346
```tsx
@@ -50,7 +53,20 @@ test('counter button increments the count', async () => {
5053
})
5154
```
5255

53-
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`:
61+
62+
```ts
63+
import { configure } from 'vitest-browser-react/pure'
64+
65+
configure({
66+
// disabled by default
67+
reactStrictMode: true,
68+
})
69+
```
5470

5571
## Special thanks
5672

eslint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default antfu(
3737
paths: ['path'],
3838
},
3939
],
40+
'import/first': 'off',
4041

4142
'import/no-named-as-default': 'off',
4243
},

0 commit comments

Comments
 (0)