Skip to content

Cannot import userEvent after installing user-event #1068

Closed
@edmundsj

Description

@edmundsj

I am trying to install user-event using the install instructions available here and then call userEvent.setup() per the instructions here. However, it is not importing and I feel like I'm missing something blindingly obvious.

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.

Activity

edmundsj

edmundsj commented on Oct 5, 2022

@edmundsj
Author

Please dear god someone put this line in the docs:

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

MorganeLeCaignec commented on Oct 21, 2022

@MorganeLeCaignec

Oh my god thank you! I was going insane.

FurrukhJamal

FurrukhJamal commented on Aug 21, 2023

@FurrukhJamal

Please dear god someone put this line in the docs:

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

My VS code also added {userEvent} instead of userEvent thank god I found this

Recep-T

Recep-T commented on Sep 28, 2023

@Recep-T

using import {userEvent} better than using import userEvent

FurrukhJamal

FurrukhJamal commented on Sep 28, 2023

@FurrukhJamal

using import {userEvent} better than using import userEvent

if this is a question you asking then i think these are two different imports, without the braces one is the import for the default that's being exported from the package and with the { } one is import of the exact named function or const from the package

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @edmundsj@MorganeLeCaignec@FurrukhJamal@ph-fritsche@Recep-T

      Issue actions

        Cannot import userEvent after installing user-event · Issue #1068 · testing-library/user-event