user-event: _userEvent.default.setup is not a function

I just had to update to the latest version: npm install @testing-library/user-event@latest

@bijay-ps userEvent.setup() was introduced in v14.

import userEvent from '@testing-library/user-event'; imports the default export of user-event as userEvent. However, that package has no default export. Only named exports. What you probably want is

-import userEvent from '@testing-library/user-event';
+import * userEvent from '@testing-library/user-event';

@ramonaspence Thanks for the feedback. I just tagged the people who upvoted the issue or commented that they are affected. I’m happy if someone else is following this conversation and adds a reaction. 😉

It seems that the current export - although it shouldn’t - does still cause problems in some environments.

Would you please check out this alternative build of v14.2.3 and report per reaction (🎉 = works, 😕 = does not work) on this comment if it works in your environment?

# yarn 1
yarn add https://pkg.csb.dev/testing-library/user-event/commit/5a1941e1/@testing-library/user-event
# yarn 2, 3
yarn add @testing-library/user-event@https://pkg.csb.dev/testing-library/user-event/commit/5a1941e1/@testing-library/user-event/_pkg.tgz
# npm
npm i https://pkg.csb.dev/testing-library/user-event/commit/5a1941e1/@testing-library/user-event

@Tommoore96 @laurmurclar @cwgw @creimers @wencel @k-sav @bijay-ps @JohnKearney2020 @FiveTies @jahumes @cblaine @headquarters @Joroze @AdamMescher @dimadk24 @litzebauer @Joblyn @suellenx @baNROne @MFukazawa @cedricmatalog @marcusvalverde @kokiy @johnshift @sbland @miphe @mattxyzeth @capndave @sherodtaylor @strmer15 @JimLin94 @DominicTylor @indgomez @alessandrocapra

I came across the same issue too. The temporary solution for me is I added the support type cjs to the transform configs of Jest in the package.json

jest: {
  ...,
  "transform": {
-   "^.+\\.(js|jsx)$": "babel-jest",
+   "^.+\\.(js|jsx|cjs)$": "babel-jest",
  }
}

I just had to update to the latest version: npm install @testing-library/user-event@latest This works for me.Thanks!

Any update on this?

I am encountering the same exact issue on 14.4.3.

I am trying to install user-event using the install instructions available here and then call userEvent.setup() per the instructions here.

To Reproduce Steps to reproduce the behavior:

1. Use create-react-app to make a new project: npx create-react-app .
2. Install user-event, react testing library and testing library DOM: npm install --save-dev @testing-library/react @testing-library/dom @testing-library/user-event
3. Attempt to import userEvent: import {userEvent} from '@testing-library/user-event';
4. Run the test and get the following error:

Cannot read property 'setup' of undefined
TypeError: Cannot read property 'setup' of undefined

Expected behavior

I expect, on installing @testing-library/user-event to be able to import userEvent and have it be defined. It is not.

Screenshots If applicable, add screenshots to help explain your problem. My full test file:

import { render, screen } from '@testing-library/react';
import App from './App';
import {userEvent} from '@testing-library/user-event';

test('renders learn react link', () => {
  const user = userEvent.setup()
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Default App.js:

import logo from './logo.svg';
import './App.css';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser: None (Jest runner)
• Version: 14.4.3 (user-event)

Additional context I’m following the same pattern I used to install all my other npm modules, and have only been using this library for the last 2 days. The fact that I can’t even import a module out of the box that’s referred to in the docs seems weird. If I’m importing it from the wrong location it’s because the examples in the docs do not have an explicit “import” statement to access the userEvent object.

The same thing happened to me. I’m using typescript with jest Node 16 lts.

"devDependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^14.0.0-beta",
    "jest": "^27.5.1",
    "ts-jest": "^27.1.3",
    "ts-node": "^10.5.0"
}

{
  "compilerOptions": {
    "allowUmdGlobalAccess": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedParameters": false,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "removeComments": true,
    "target": "ESNEXT",
    "module": "ESNext",
    "noEmit": true,
    "esModuleInterop": true,
    "jsx": "react"
  },
  "include": ["src"]
}

export default {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  preset: 'ts-jest/presets/default-esm',
  testEnvironment: 'jest-environment-jsdom',
  transform: {},
  transformIgnorePatterns: [
    "node_modules/(?!(ts-invariant)/)",
  ],
  extensionsToTreatAsEsm: [
    ".jsx",
    ".ts",
    ".tsx"
  ],
  globals: {
    'ts-jest': {
      useESM: true
    },
  },
  setupFilesAfterEnv: ['./jest.setup.ts']
};

import userEvent from '@testing-library/user-event'

const user = userEvent.setup()

error: TypeError: userEvent.setup is not a function

If I run console.log(userEvent) I get { PointerEventsCheckLevel: [Getter], default: [Getter] }

I can access the methods if I access them through default but typescript thinks userEvent is already the default. Very weird.

I was having the same issue on 14.4.3 but importing it as follows works:

import * as userEvent from "@testing-library/user-event";

const user = userEvent.default.setup();

I just had to update to the latest version: npm install @testing-library/user-event@latest This works for me.Thanks!

This solved it for me, thank you!

Also experiencing the same issue (just tried to update to latest), reverting to v13 for the moment until it’s solved.

This happened to me today with @testing-library/user-event 14.1.0 with Typescript 4.6.3, Jest 27.5.1 and TS Jest 27.1.4 (latest version of each).

What I found was that this happened in my project because the files in the dist folder of the package are produced with .cjs and .mjs extensions. When I renamed them to use .js, moved the ESM entry point into a separate esm directory, and then updated the package.json paths, everything worked again for me.

Here’s the patch file I created locally:

diff --git a/node_modules/@testing-library/user-event/dist/index.mjs b/node_modules/@testing-library/user-event/dist/esm/index.js
similarity index 100%
rename from node_modules/@testing-library/user-event/dist/index.mjs
rename to node_modules/@testing-library/user-event/dist/esm/index.js
diff --git a/node_modules/@testing-library/user-event/dist/index.cjs b/node_modules/@testing-library/user-event/dist/index.js
similarity index 100%
rename from node_modules/@testing-library/user-event/dist/index.cjs
rename to node_modules/@testing-library/user-event/dist/index.js
diff --git a/node_modules/@testing-library/user-event/package.json b/node_modules/@testing-library/user-event/package.json
index 9d8bdc0..35134cb 100644
--- a/node_modules/@testing-library/user-event/package.json
+++ b/node_modules/@testing-library/user-event/package.json
@@ -25,12 +25,12 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.mjs"
+      "require": "./dist/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "types": "./dist/types/index.d.ts",

Slightly more edge case example. Using the UserEvent library in a bit.dev component had the same issue. I followed the steps above but what actually worked was moving the index.cjs file out of the dist to the same level as the package.json file and renaming it to index.js.

This is the ESM export by esbuild: https://unpkg.com/browse/@testing-library/user-event@14.0.0-beta.13/dist/index.mjs

2966 | var userEvent = __spreadProps(__spreadValues({}, directApi_exports), {
2967 |   setup: setupMain
2968 | });
2969 | export {
2970 |   PointerEventsCheckLevel,
2971 |   userEvent as default
2972 | };

🎉 This issue has been resolved in version 14.4.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

I got same problem, here is my situation:

1. typeof userEvent = string; userEvent = index.cjs;
2. In jest.config.transform I got "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
3. fileTransform.js:

'use strict';

const path = require('path');

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html

module.exports = {
  process(src, filename) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },
};

It’s clearly .cjs/.mjs file was trasformed to it’s filename, so I fix this by adding mjs and cjs into "^(?!.*\\.(mjs|cjs|js|jsx|css|json)$)".

Maybe most problems which package is index.js were caused by jest.config.transform.

For me works after add:

transformIgnorePatterns: [
        '/node_modules/(?!(react-use)/)',
],