Description
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:
- Use create-react-app to make a new project:
npx create-react-app .
- Install user-event, react testing library and testing library DOM:
npm install --save-dev @testing-library/react @testing-library/dom @testing-library/user-event
- Attempt to import userEvent:
import {userEvent} from '@testing-library/user-event';
- 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 commentedon Oct 5, 2022
Please dear god someone put this line in the docs:
MorganeLeCaignec commentedon Oct 21, 2022
Oh my god thank you! I was going insane.
FurrukhJamal commentedon Aug 21, 2023
My VS code also added
{userEvent}
instead ofuserEvent
thank god I found thisRecep-T commentedon Sep 28, 2023
using import {userEvent} better than using import userEvent
FurrukhJamal commentedon Sep 28, 2023
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