React-native-web: Triggering click on Touchable via testing library not triggering onPress

[nealoke]

The problem
When using react-testing-library for testing components made with react-native-web, I'm unable to trigger the onPress handler with fireEvent.click(node). Currently I have to add 2 fireEvent like shown below. To me this feels wrong as it also triggers on click.

fireEvent.touchStart(getByTestId("thumbnail-1"));
fireEvent.touchEnd(getByTestId("thumbnail-1"));

How to reproduce
https://codesandbox.io/s/issue-react-native-for-web-4vtvw?fontsize=14

Steps to reproduce:

1. Open sandbox
2. Run test
3. See that the one for click fails while the one wiht touch works

Expected behavior
Should work the same for click as for touch, aka both tests should pass.

[necolas]

The responder system doesn't rely on click events so you can't expect to dispatch those DOM events have have onPress get called.

[nealoke]

@necolas on what do they rely then? And why does clicking it in a browser work?

[necolas]

Mouse, touch, and eventually pointer events. react-testing-library isn't really the right tool for the job. Browsers dispatch a whole sequence of events (example) and unless you want to fire entire sequences in your tests, you won't be able to reproduce the expected behavior.

react-native-testing-library does a better job because it doesn't try to emulate the native events, but instead calls the high-level callback directly on a shallowly rendered element. This means you don't have to test the integration between the framework and the platform (not your responsibility). There could be multiple different scenarios that result in onPress being called. Product code tests shouldn't be replicating all those scenarios because that's the job of the framework's tests. Instead you could test just that your logic/response is correct when a high-level callback like onPress is called with a certain event payload.

[nealoke]

Thanks for the explanation, very interesting. Do you have an example of tests written this way?

[necolas]

https://github.com/testing-library/native-testing-library
https://github.com/callstack/react-native-testing-library

[aaronmgdr]

ah this was informative, thanks