Cant find setup() on userEvent

Question

I am trying to use the user-event utility in testing library as described here :

https://testing-library.com/docs/user-event/intro

Unfortunatley when I try and call the setup function

userEvent.setup()

My IDE says that it cannot be found :

Why is this happening?

My import in my file looks like this :

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

And my package dependencies look like this :

"@testing-library/dom": "^8.11.3",
"@testing-library/jest-dom": "5.7.0",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",

Grannie

Answer 1

The userEvent.setup() API is added in v14.0.0

There is a note in the doc user-event/intro

These docs describe user-event@14.

Docila

Answer 2

First, updated the version of the User Event package (as per React recommendation, you can check from their official website as well https://testing-library.com/docs/user-event/intro/)

npm install user-event@14

Package.json

"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.5.2"

App.jsx

 import { useState } from "react";

function App() {
  const [name, setName] = useState<string>("Hello World");
  return (
    <div>
      <h1>{name}</h1>
      <button onClick={() => setName("Hi World")}>Change</button>
    </div>
  );
}

export default App;

App.test.jsx

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

test("Testing User Event", async () => {
  userEvent.setup();
  render(<App />);
  let btn = screen.getByRole("button", { name: "Change" });
  await userEvent.click(btn);
  expect(
    screen.getByRole("heading", { name: /Hi world/i })
  ).toBeInTheDocument();
});

Hillside