docs: Update React setup.mdx with Vitest configuration instructions #1195
Conversation
✅ Deploy Preview for testing-library ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
docs/react-testing-library/setup.mdx
Outdated
| npm install --save-dev @testing-library/react @testing-library/jest-dom | ||
| ``` | ||
|
|
||
| Since the testing library uses jsdom, you must set the `environments` |
There was a problem hiding this comment.
Neither /react nor /dom "use" JSDOM. But both libraries require a DOM implementation to be available. The config and recommendation for JSDOM is fine but the wording needs some tweaking to make sure people are aware that they could also use a Browser or other DOM implementations.
There was a problem hiding this comment.
Thank you for pointing this out. I tweak the wording to make it more clear.
docs/react-testing-library/setup.mdx
Outdated
| testing. However, some further steps might help you develop more efficiently. | ||
|
|
||
| When utilizing testing-library APIs, you must first import | ||
| `@testing-library/jest-dom` in every file. It's quite inconvenient. |
There was a problem hiding this comment.
For /react you don't need @testing-library/jest-dom. Are we also sure @testing-library/jest-dom library even works Vitest?
There was a problem hiding this comment.
Sorry, I am not sure if this is what you are asking. If we set the globals to true, then the matchers will be automatically extended when importing @testing-library/jest-dom. However, we must extend the matchers manually if we do not set it to true.
There was a problem hiding this comment.
Sure but this document is about @testing-library/react not @testing-library/jest-dom. Let's split this out into a separate PR since I'm not sure jest-dom wants to support Vitest.
docs/react-testing-library/setup.mdx
Outdated
| By default, vitest does not provide [global](https://vitest.dev/config/#globals) APIs | ||
| for explicitness, so you have to import the `describe` or `test` from vitest | ||
| when using them. If you want to use them globally without importing them, | ||
| you can set `globals` to `true` in the `vite.config.js`. |
There was a problem hiding this comment.
Could you check if auto-cleanup works with Vitest with globals? We should document test cleanup for both config options.
There was a problem hiding this comment.
The auto-cleanup works as usual if we set the globals to true.
I also add a paragraph to describe how to do the cleanup and extend matchers manually when the globals is false.
docs/react-testing-library/setup.mdx
Outdated
| 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`. | ||
|
|
||
| ```js | ||
| // src/setupTests.js | ||
| import '@testing-library/jest-dom' | ||
| ``` | ||
|
|
||
| Vitest will run `src/setupTests.js` before each test file, as configured in `setupFiles`. | ||
|
|
||
| ```js | ||
| // vite.config.js | ||
| export default defineConfig({ | ||
| test: { | ||
| environment: "jsdom", | ||
| globals: true, | ||
| // highlight-next-line | ||
| setupFiles: "src/setupTests.js" | ||
| }, | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
@eps1lon, do you suggest removing this paragraph from this PR?
Having said that, even though it's more related to /jest-dom, developers who use @testing-library/react must know how to set it up if they want to use /react. They probably only check and follow the documentation here, assuming that /react will work out without reading the doc in /jest-dom.
There was a problem hiding this comment.
Yep. jest-dom docs should handle this.
There was a problem hiding this comment.
I think for Vitest you'd use vitest-dom instead of jest-dom
There was a problem hiding this comment.
I don't think many people use vitest-dom for testing react components with Vitest. Additionally, without addressing the step of creating the setupTests file, it can be challenging to set up the testing environment for React. Please correct me if I am wrong.
There was a problem hiding this comment.
That's not really relevant. jest-dom is not for usage with Vitest. vitest-dom is. I don't see how the popularity of vitest-dom is relevant here?
There was a problem hiding this comment.
Thanks for your reply. I understand your points now. My documentation appears to be written for @testing-library/jest-dom but not for @testing-library/react, right?
Should I close this Pull Request here and create a new one for @testing-library/jest-dom? Since you mentioned that jest-dom is not meant to be used with Vitest, I'm considering whether I should create a Pull Request. I know that Vitest is compatible with Jest. Does this mean that Vitest is also compatible with jest-dom? What do you think?
There was a problem hiding this comment.
Your PR is targetting @testing-library/react. There's no need to target @testing-library/jest-dom since that library is not supposed to be used with Vitest.
There was a problem hiding this comment.
@eps1lon thanks. I've removed the paragraph. Could you check it again?
Vitest is becoming a popular tool for starting a React project from scratch. However, there is still no documentation on how to use it. I felt it would be useful to update the React developer documentation with Vitest instructions.
Please let me know if the section needs to be reorganized or if further information is required.