Simulating click on checkbox label is not triggering onChange event on inside input

I have an Checkbox component that is an <input type=checkbox> inside a <label>. When I try to simulate an event of click in the label it does not trigger my component onChange function.

Here is my component code:

const Checkbox = ({ disabled, onChange, checked, label }: Props) => (
  <label
    className={styles.label}
    disabled={disabled}
  >
    <input
      type='checkbox'
      className={styles.checkbox}
      checked={checked}
      disabled={disabled}
      onChange={onChange}
    />
    {label}
  </label>
);

My test:

  it('calls onChange when the checkbox label is clicked', () => {
    const wrapper = mount(<Checkbox label='Click me' onChange={onChange} />);
    const label = wrapper.find('label');
    label.simulate('click');
    expect(onChange).toBeCalled();
  });

To my understanding the simulate click should trigger the component onChange function. As it works when a user click it and when we trigger an click event by javascript.

[ljharb]

Simulating click only calls onClick - the purpose isn’t to test React event wiring, or browser event handling.

There’s no need to test that React will trigger a “change” event when a checkbox is clicked - all you need is to shallow-render Checkbox, and assert that the input’s onChange attribute matches the prop you passed.

[stephenh]

the purpose isn’t to test React event wiring, or browser event handling.

True, but fwiw it’s also really nice to have tests that closely match the mental-model/flow of the user, i.e. react-testing-libraries principle of “The more your tests resemble the way your software is used, the more confidence they can give you.”.

So, agreed that technically yes, as an implementation detail I know that “click on this radio” will really do a change prop, but it’d be nice if this still “just worked”, especially for mount which AFAIU renders down to DOM elements anyway.

Admittedly, it’s an engineer/text UX issue and not a core functionality bug, but we’re trying to use an approach of “props are internal impl details, the test should only interact with / touch / click DOM elements” (at least for full mount-based tests), and so hit this bump.

Thanks @dmmulroy for the work around, we’ll try that!