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!

Menorah

Exact same issue and effective v.14 all api's are async - github.com/testing-library/user-event/pull/790 – Malvia

Answer 1

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)
})

Conchaconchie

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. – Doldrums

Exact same issue - this works great. – Malvia

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

Answer 2

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

Steps:

1. npx create-react-app rtl-typescript --template typescript
2. 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

Lulita

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

Answer 3

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);
  });
});

Emlyn

Answer 4

add a role tag to your button

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

or use screen.getByText('Click Me')

Binoculars

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 – Menorah

Did you install userEvent? – Binoculars

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