I have a simple Icon ponent that accepts a onClick() prop which is called when clicked on the icon. Additionally each time the icon is clicked another function event.stopPropagation() is called. This function is a property of the actual click event fired by the icon (=represents a basic span).

Now I want to check two things:

1. The onClick prop function should be called.
2. The stopPropagation callback passed via the event should be called.

Previously I was using enzyme to test which worked perfectly fine.

test('Icon should call the callback on when space is pressed', () => {
    const onClick = jest.fn();
    const stopPropagation = jest.fn();
    const icon = shallow(<Icon className="test" name="su-pen" onClick={onClick} />);
    icon.simulate('keypress', {key: ' ', stopPropagation});
    expect(onClick).toBeCalled();
    expect(stopPropagation).toBeCalled();
});

Now I want to migrate this to React Testing Library. I have tried it with fireEvent but stopPropagation() doesn't get called.

test('Icon should call the callback on click', () => {
    const onClick = jest.fn();
    const stopPropagation = jest.fn();
    render(<Icon className="test" name="su-pen" onClick={onClick} />);
    const icon = screen.queryByLabelText('su-pen');
    fireEvent.click(icon, {stopPropagation});
    expect(onClick).toBeCalled();
    expect(stopPropagation).toBeCalled();
    //                      ^ --> failed
    // Expected number of calls: >= 1
    // Received number of calls:    0
});

I have a simple Icon ponent that accepts a onClick() prop which is called when clicked on the icon. Additionally each time the icon is clicked another function event.stopPropagation() is called. This function is a property of the actual click event fired by the icon (=represents a basic span).

Now I want to check two things:

1. The onClick prop function should be called.
2. The stopPropagation callback passed via the event should be called.

Previously I was using enzyme to test which worked perfectly fine.

test('Icon should call the callback on when space is pressed', () => {
    const onClick = jest.fn();
    const stopPropagation = jest.fn();
    const icon = shallow(<Icon className="test" name="su-pen" onClick={onClick} />);
    icon.simulate('keypress', {key: ' ', stopPropagation});
    expect(onClick).toBeCalled();
    expect(stopPropagation).toBeCalled();
});

Now I want to migrate this to React Testing Library. I have tried it with fireEvent but stopPropagation() doesn't get called.

test('Icon should call the callback on click', () => {
    const onClick = jest.fn();
    const stopPropagation = jest.fn();
    render(<Icon className="test" name="su-pen" onClick={onClick} />);
    const icon = screen.queryByLabelText('su-pen');
    fireEvent.click(icon, {stopPropagation});
    expect(onClick).toBeCalled();
    expect(stopPropagation).toBeCalled();
    //                      ^ --> failed
    // Expected number of calls: >= 1
    // Received number of calls:    0
});

• javascript
• reactjs
• jestjs
• enzyme
• react-testing-library

• You simulate the keypress event when using enzyme, but you fire click event when using RTL. They are different events. – Lin Du Commented Aug 2, 2022 at 2:24
• That's right I might have formulated the Question unfortunately. – Behemoth Commented Aug 2, 2022 at 5:31

1 Answer 1

You are testing the internals of the ponent this way, not its behavior.

I would rather wrap that in a dummy element with an onclick handler, and check that that is not called when clicking the icon:

test('Icon should not propagate the click event', () => {
    const onClick = jest.fn();
    const onOuterClick = jest.fn();

    render(
      <div onClick={onOuterClick}>
         <Icon className="test" name="su-pen" onClick={onClick} />
      </div>
    );
    const icon = screen.queryByLabelText('su-pen');
    fireEvent.click(icon);
    
    expect(onClick).toHaveBeenCalledTimes(1);
    expect(onOuterClick).toHaveBeenCalledTimes(0);
});