docs: reintroduce import/require usage for user-event #1143
Conversation
✅ Deploy Preview for testing-library ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
I know, but without this there isn't any mention on how to safely use user-event with CJS, and since this issue doesn't apply to other Testing Library packages, I don't think it would be obvious. If you have any suggestions on how to simplify this while still safely importing user-event, I'm open to it. Otherwise, I think it would be a good idea to merge. |
| ```js | ||
| import userEvent from '@testing-library/user-event' | ||
|
|
||
| // or | ||
|
|
||
| const {default: userEvent} = require('@testing-library/user-event') | ||
| ``` |
There was a problem hiding this comment.
Maybe we should use Tabs here too. (Backslash to make the suggestion display.)
| ```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.
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.
|
|
||
| // or | ||
|
|
||
| const {default: userEvent} = require('@testing-library/user-event') |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
moduleandmainentrypoints 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?
It seems like when the docs for user-event 14 were released, the docs on import/require usage were removed. However, this reintroduces issues like testing-library/user-event#485 if you don't already know how to destructure the
defaultexport from the CJS module. I fixed this by copying my docs from user-event 13 (testing-library/user-event#495).