Skip to content

docs: Update React setup.mdx with Vitest configuration instructions #1195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
remove paragraph
  • Loading branch information
pjchender committed Feb 15, 2023
commit e08c6d2a45bb4e03a51d1813d8b367bbae85dcb0
57 changes: 16 additions & 41 deletions docs/react-testing-library/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -542,13 +542,8 @@ export default defineConfig({
});
```

> **NOTE**
>
> An alternative to JSDOM is [Happy DOM](https://github.com/capricorn86/happy-dom).
> You can use either `jsdom` or `happy-dom` to create a browser-like environment.

By default, Vitest does not provide [global](https://vitest.dev/config/#globals) APIs.
To use them without importing them like jest,
To use them without importing them as jest,
you can set `globals` to `true` in the `vite.config.js`.

```js
Expand All @@ -574,22 +569,25 @@ your `tsconfig.json`.
}
```

> **NOTE**
>
> Setting `test.globals` to `true` also improves compatibility when using
> testing-library with Vitest, such as extending matchers and auto-cleanup, so
> you don't have to set them up manually.

To extends the matchers in Vitest, you just need to import the `@testing-library/jest-dom`
after setting `test.globals` to `true`. To do this, create a `setupTests` file
and import `@testing-library/jest-dom`.
To extend the matchers and do the cleanup manually. You can do this in
`setupFiles.js`.

```js
// src/setupTests.js
import '@testing-library/jest-dom'
// src/setupFiles.js
import matchers from '@testing-library/jest-dom/matchers';
import { cleanup } from '@testing-library/react';
import { afterEach, expect } from 'vitest';

// Extends Vitest's expect function with matchers from the testing-library
expect.extend(matchers);

// Unmounts React trees that were mounted with render.
afterEach(() => {
cleanup();
});
```

Vitest will run `src/setupTests.js` before each test file, as configured in `setupFiles`.
Then set the `setupFiles` to `src/setupFiles.js` in the `vite.config.js`.

```js
// vite.config.js
Expand All @@ -602,26 +600,3 @@ export default defineConfig({
},
})
```

If you don't set `globals` to `true` as previously mentioned, you will need to
extend the matchers and do the cleanup manually. You can do this in
`setupFiles.js` as well.

```js
// src/setupFiles.js

/**
* Do the setup here if you DO NOT set globals to true
*/
import matchers from '@testing-library/jest-dom/matchers';
import { cleanup } from '@testing-library/react';
import { afterEach, expect } from 'vitest';

// Extends Vitest's expect function with matchers from the testing-library
expect.extend(matchers);

// Unmounts React trees that were mounted with render.
afterEach(() => {
cleanup();
});
```