Just started learning React testing with Jest, and am struggling with something simple. When I call userEvent.click(btn), the test fails saying that userEvent.click() is undefined.
import { render, fireEvent, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import '@testing-library/jest-dom';
import '@testing-library/dom'
import { Button } from "./Button";
describe("clicks button", () => {
it("onclick", () => {
render(<Button />);
screen.debug();
let btn = screen.getByTitle("dummyButton");
expect(btn.innerHTML).toBe("Click me");
userEvent.click(btn);
btn = screen.getByTitle("dummyButton");
expect(btn.innerHTML).toBe("ButtonClicked");
});
});
export const Button = () =>{
const [buttonText, setButtonText] = useState("Click me")
const handleClick = () =>{
setButtonText("ButtonClicked")
}
return(
<div>
<button onClick={handleClick} title="dummyButton">{buttonText}</button>
</div>
)
}
● clicks button › onclick
TypeError: Cannot read properties of undefined (reading 'click')
17 | let btn = screen.getByTitle("dummyButton");
18 | expect(btn.innerHTML).toBe("Click me");
> 19 | userEvent.click(btn);
| ^
20 | btn = screen.getByTitle("dummyButton");
21 | expect(btn.innerHTML).toBe("ButtonClicked");
22 | });
at Object.<anonymous> (src/Components/Button/Button.test.js:19:15)
Seems like it's a default export based on the docs:
import userEvent from '@testing-library/user-event'
can you update your import and try again?
What fixed it for me was npm install @testing-library/user-event@13.5.0
The User Event has a lot of problems IMO and hasn't been perfected. I had to downgrade my npm version to get it to work.
Try the below code. I have changed "it" to an async arrow function and added await before userEvent. This works for me. Also do a default import at the top.
describe("clicks button", () => {
it("onclick", async () => {
render(<Button />);
screen.debug();
let btn = screen.getByTitle("dummyButton");
expect(btn.innerHTML).toBe("Click me");
await userEvent.click(btn);
btn = screen.getByTitle("dummyButton");
expect(btn.innerHTML).toBe("ButtonClicked");
});
});