Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot import userEvent after installing user-event #1068

Closed
edmundsj opened this issue Oct 5, 2022 · 5 comments · Fixed by testing-library/testing-library-docs#1153 · May be fixed by testing-library/testing-library-docs#1143

Comments

@edmundsj
Copy link

edmundsj commented Oct 5, 2022

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.

@edmundsj
Copy link
Author

edmundsj commented Oct 5, 2022

Please dear god someone put this line in the docs:

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

@QuentinLeCaignec
Copy link

Oh my god thank you! I was going insane.

@FurrukhJamal
Copy link

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
Copy link

Recep-T commented Sep 28, 2023

using import {userEvent} better than using import userEvent

@FurrukhJamal
Copy link

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
Labels
None yet
Projects
None yet
5 participants