How to best simulate press events in Enzyme?

[e-cooper]

❔ Question

Any recommendations for how to simulate press events in Enzyme?

💻 Code Sample

The only way I was able to invoke the callback passed to onPress was to do so directly:

// this passes
test("test invoking prop directly", () => {
  const onPress = jest.fn();
  const wrapper = mount(<Button onPress={onPress} />);
  const button = wrapper.find(Button); // get instance

  expect(onPress).not.toHaveBeenCalled();
  button.props().onPress(); // invoke callback directly
  expect(onPress).toHaveBeenCalledTimes(1);
});

But I would rather trigger a click event on the button element so I know it's all wired correctly to my Button component.

// this fails
test("test simulating click event", () => {
  const onPress = jest.fn();
  const wrapper = mount(<Button onPress={onPress} />);
  const button = wrapper.find("button"); // get HTML element

  expect(onPress).not.toHaveBeenCalled();
  button.simulate("click"); // trigger a click event
  expect(onPress).toHaveBeenCalledTimes(1);
});

I made a small CodeSandbox that has this wired up, just click on the "Tests" tab above the browser frame to see the test output.
https://codesandbox.io/s/unruffled-feather-evuqv?file=/src/Button.test.js

[snowystinger]

I believe you need to do a little more work to send in the event object with enzyme. See https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/simulate.html
You can look in https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/usePress.ts to see what all we use from the event object.

[devongovett]

This section of the docs should also help. https://react-spectrum.adobe.com/react-spectrum/testing.html#triggering-events

[torgeadelin]

Is there any way of using enzyme instead of the recommended libraries in the docs?

[torgeadelin]

After following the advice from @snowystinger , I have finally managed to make it work.

export const triggerPress = (element: ReactWrapper): void => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (element.prop('onClick') as (e: any) => boolean)({
    button: 0,
    detail: 0,
    nativeEvent: { detail: 0 },
    currentTarget: element.getDOMNode(),
    target: element.getDOMNode(),
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    stopPropagation: () => {},
  });
};