react-testing: userEvent.click does not work

Question

I'm trying to use userEvent for testing UI interaction. However, it does not seem to work properly. I used this document as reference. Is there some necessary setup in order for it to work?

Here's the test code:

  test('A', () => {
    //setup
    const user = userEvent.setup();

    const sensing = jest.fn();
    const subject = (<button onClick={sensing}>testButton</button>);

    render(subject);

    // run
    user.click(screen.getByText('testButton'));

    // check
    expect(sensing).toBeCalledTimes(1);
  });

Using fireEvent.click instead of user.click does work.

Part of package.json

"react": "^18.1.0",
"react-dom": "^18.1.0",
"@storybook/react": "^6.4.22",
"@storybook/testing-library": "^0.0.9",
"@testing-library/dom": "^8.13.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/user-event": "^14.2.0",

...

Does this answer your question? userEvent in React Testing Library Doesn't Cause onClick To Be Called — Sasgorilla
– Sasgorilla, Commented Apr 17, 2024 at 17:30

DarkTrick · Accepted Answer · 2022-08-04 08:48:44Z

35

UserEvent needs await. So you want to write this:

  test('A', async () => {
    //setup
    const user = userEvent.setup();

    const sensing = jest.fn();
    const subject = (<button onClick={sensing}>testButton</button>);

    render(subject);

    // run
    await user.click(screen.getByText('testButton'));

    // check
    expect(sensing).toBeCalledTimes(1);
  });

answered Aug 4, 2022 at 8:48

DarkTrick

3,6774 gold badges33 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Metehan Senol Over a year ago

What about the right click or {button: 2} whatever? seems like not supported yet

Martin Konecny Over a year ago

Note that only UserEvent 14 or newer needs await. Every version before that was synchronous

Deeraj N · Accepted Answer · 2022-10-05 17:22:57Z

3

The mock will not be called if the button you are clicking is disabled. This function will be called by fireEvent but not by a user event.Check if the button is disabled or not

answered Oct 5, 2022 at 17:22

Deeraj N

352 bronze badges

1 Comment

TimewiseGamgee Jun 13 at 21:07

Thank you. That solved it for me. I never realized my button was disabled until I double checked after your comment and saw a prop incorrectly setting it to disabled.

Collectives™ on Stack Overflow

react-testing: userEvent.click does not work

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related