Skip to content

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: reintroduce import/require usage for user-event #1143

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 10 additions & 0 deletions docs/user-event/install.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be automatically happen when you write import userEvent from '@testing-library/user-event' and let it transpile by Babel?
This seems like a step backwards regarding progress of ES6 modules in the ecosystem so I would encourage user-event to get this right. You probably want to ship ES6 modules and CommonJS in module and main entrypoints respectively.

Copy link
Member Author

@nickserv nickserv Aug 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be automatically happen when you write import userEvent from '@testing-library/user-event' and let it transpile by Babel?

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 user-event import manually when editing tests from the extension.

You probably want to ship ES6 modules and CommonJS in module and main entrypoints respectively.

user-event does do this. Are you suggesting there is a build configuration issue with user-event that can be solved without changing the docs?

```
Comment on lines +31 to +37
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should use Tabs here too. (Backslash to make the suggestion display.)

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>

Copy link
Member Author

@nickserv nickserv Aug 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The 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 const {default: userEvent}, even though it's valid ES6.


Note that `@testing-library/user-event` requires `@testing-library/dom`.

If you use one of the
Expand Down