-
Notifications
You must be signed in to change notification settings - Fork 729
docs: reintroduce import/require usage for user-event #1143
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,6 +26,16 @@ yarn add --dev @testing-library/user-event | |
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| Now simply import it in your tests: | ||
|
|
||
| ```js | ||
| import userEvent from '@testing-library/user-event' | ||
|
|
||
| // or | ||
|
|
||
| const {default: userEvent} = require('@testing-library/user-event') | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't this be automatically happen when you write There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Yes, but not everyone uses Babel. Specifically, Testing Library Recorder Extension needs to use CJS modules for now because it can't introduce configuration to enable Babel or Jest's experimental ES modules (which in my experience do not work well with that project's dependencies). I edited the documentation to fix this previously, but it wasn't included in the new docs for version 14. I also don't want to confuse users if they try to type a
|
||
| ``` | ||
|
Comment on lines
+31
to
+37
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we should use
Suggested change
```js
import userEvent from '@testing-library/user-event'
// or
const {default: userEvent} = require('@testing-library/user-event')
```
<Tabs defaultValue="esm" values={[
{ label: 'In EcmaScript Module', value: 'esm' },
{ label: 'In CommonJS', value: 'cjs' },
]}>
<TabItem value="esm">
```js
import userEvent from '@testing-library/user-event'
\```
</TabItem>
<TabItem value="cjs">
```js
const {default: userEvent} = require('@testing-library/user-event')
\```
</TabItem>
</Tabs>
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was thinking it would be nice to show both variants by default in case users don't understand the difference between EcmaScript and CommonJS modules without seeing code. I also can't seem to get this to parse with |
||
|
|
||
| Note that `@testing-library/user-event` requires `@testing-library/dom`. | ||
|
|
||
| If you use one of the | ||
|
|
||