Using recommended require method in README resulting in 'is not a function' errors

[dvbsknd]

I'm quite new to JavaScript/React programming so please forgive me if this issue is redundant or misguided. It may be that my environment (with webpack) is rewriting/transpiling imports in a way that introduces this issue, but I thought I would log it in case it was something bigger. If not relevant to all users please feel free to close it.

• @testing-library/user-event version: "@testing-library/user-event": "^12.2.0"

• Testing Framework and version: "mocha": "^8.1.3"
• DOM Environment: npx mocha -r @babel/register -r @babel/polyfill on the CLI with react and @testing-library/react required in the actual test. jsdom isn't required at the point that the issue appears.

Relevant code or config

var userEvent = require('@testing-library/user-event')
console.log(userEvent);

...vs...

import userEvent from '@testing-library/user-event'
console.log(userEvent);

What you did:

I used require instead of import and the behaviour differed, resulting in an ...is not a function error when trying to use one of the methods.

What happened:

When using the require method described in README I ended up with a different object assigned to userEvent, so when I tried to use one of the methods I got TypeError: userEvent.clear is not a function, because that function would actually now live at userEvent.default.type.

You can see the two objects output by require/import respectively below:

require

{
  default: {
    click: [Function: click],
    dblClick: [Function: dblClick],
    type: [AsyncFunction: type],
    clear: [Function: clear],
    tab: [Function: tab],
    hover: [Function: hover],
    unhover: [Function: unhover],
    upload: [Function: upload],
    selectOptions: [Function: bound selectOptionsBase],
    deselectOptions: [Function: bound selectOptionsBase],
    paste: [Function: paste]
  }
}

import

{
  click: [Function: click],
  dblClick: [Function: dblClick],
  type: [AsyncFunction: type],
  clear: [Function: clear],
  tab: [Function: tab],
  hover: [Function: hover],
  unhover: [Function: unhover],
  upload: [Function: upload],
  selectOptions: [Function: bound selectOptionsBase],
  deselectOptions: [Function: bound selectOptionsBase],
  paste: [Function: paste]
}

Reproduction repository

See above.

Problem description

The behaviour of the require method differs from that of the import method recommended in the README.

Suggested solution

I'm not clear on a suggested solution, but my workaround was to use:

const { default: userEvent } = require('@testing-library/user-event'); to import the module.

[nickserv]

I vaguely remember a related issue with Babel wrapping CJS modules in an extra default export, but it It seems to me like all published versions of user-event have the issue.

@kentcdodds Is this intentional, in which case we should update the documentation, or should we fix the build here or in kcd-scripts?

[kentcdodds]

Yeah, this isn't a bug in anything but the docs. We can't make this work both ways, so we prefer a better experience for ESModules because that's what most people are using. So we just need to update the docs to indicate that if you're using CJS you need to do this:

const { default: userEvent } = require('@testing-library/user-event')

[github-actions]

🎉 This issue has been resolved in version 12.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀