React Testing Library: Checkboxes and events

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

TL;DR

If you're testing a checkbox input element with React Testing Library, you'll want to fire a click event on the checkbox not a change event!

Read on to find out how I discovered this!

I was recently refactoring about 70 individual Enzyme-based unit tests across our design system codebase at work to swap it for React Testing Library, and encountered an odd quirk that I figured I'd document on my blog.

const handleChange = jest.fn();
const wrapper = mount(<CheckboxTable onChange={handleChange} />);

wrapper
  .find(`[data-enzyme-id="header-checkbox"]`)
  .simulate('change', { target: { checked: true } });

expect(handleChange).toHaveBeenCalledTimes(

const handleChange = jest.fn();
render(<CheckboxTable onChange={handleChange} />);

fireEvent.change(screen.getByTestId('header-checkbox'), {
  target: { checked: true },
});

expect(handleChange).toHaveBeenCalledTimes(1);

const handleChange = jest.fn();
render(<CheckboxTable onChange={handleChange} />);

fireEvent.click(screen.getByTestId('header-checkbox'));

expect(handleChange).toHaveBeenCalledTimes(1);

React Testing Library: Checkboxes and events

React Testing Library: Checkboxes and events

Tags:

Related Posts

Development

Related Posts

Development

React