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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions