userEvent in React Testing Library Doesn't Cause onClick To Be Called

Question

I'm trying to run a really simple test with react-testing-library where a button is given a mock function, the button is clicked, and the test checks that the function was called. However, the test is currently failing because the function isn't being called. Here's the code:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Button', () => {
  test('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

No errors are thrown, the button is successfully found, but for some reason, the function doesn't register that it's been called.

Any help would be appreciated!

Exact same issue and effective v.14 all api's are async - github.com/testing-library/user-event/pull/790 — meteor
– meteor, Commented Jun 7, 2022 at 0:31

kimkunjj · Accepted Answer · 2022-04-29 06:37:51Z

33

I had the same problem, fireEvent works but the recommended userEvent doesn't trigger click handler. Turned out that userEvent is async. Below is my working test case.

test('Error message should show when all fields are blank', async () => {
  const user = userEvent.setup()
  render(<Signup />)
  
  await user.click(screen.getByRole('button'))

  expect(screen.getByTestId('errors'))
    .toHaveTextContent(dict.fields_must_not_be_empty)
})

answered Apr 29, 2022 at 6:37

kimkunjj

1,0261 gold badge12 silver badges21 bronze badges

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

3 Comments

ShadyAmoeba Over a year ago

Thank you. I noticed this wasn't a problem when my app was on react scripts 4 and react 17 but became a problem after upgrading.

meteor Over a year ago

Exact same issue - this works great.

meteor Over a year ago

Effective v.14 all api's are async - github.com/testing-library/user-event/pull/790

Karthikeyan · Accepted Answer · 2021-09-23 20:29:05Z

3

Worked fine for me Make sure you install this package @testing-library/user-event @testing-library/dom

Steps:

npx create-react-app rtl-typescript --template typescript
npx install --save-dev @testing-library/user-event @testing-library/dom

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

describe('Button', () => {
  test('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

In case needed, my package.json file dependencies

edited Sep 23, 2021 at 20:29

answered Sep 23, 2021 at 20:23

Karthikeyan

971 silver badge8 bronze badges

1 Comment

Alberto Perez Over a year ago

This is a better answer, is more detailed than the others.

skethoskope · Accepted Answer · 2021-09-23 20:18:34Z

0

This works

describe('Button', () => {
  test.only('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByText(/Click me/i));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

answered Sep 23, 2021 at 20:18

skethoskope

515 bronze badges

Comments

WebbH · Accepted Answer · 2021-09-23 13:59:14Z

-1

add a role tag to your button

<button 
  onClick={handleClick} 
  role="button" 
  type="button"
>
  Click Me
</button>

or use screen.getByText('Click Me')

answered Sep 23, 2021 at 13:59

WebbH

2,4322 gold badges17 silver badges29 bronze badges

3 Comments

Matt Stobbs Over a year ago

Doesn't seem to do it. The test is able to find the button successfully but for some reason the userEvent.click doesn't trigger the onClick prop

WebbH Over a year ago

Did you install userEvent?

Matt Stobbs Over a year ago

Yeah, and running other userEvent tests pass (like the one from the docs - testing-library.com/docs/…)

Collectives™ on Stack Overflow

userEvent in React Testing Library Doesn't Cause onClick To Be Called

4 Answers 4

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related