fireEvent seems to always trigger event (on disabled TouchableOpacity)

[fwal]

I'm trying to figure out why it seems like the fireEvent.press function always seem to trigger a callback even though it shouldn't be registered. My use case is that I'm trying to write a test that makes sure that onPress isn't called if the component is "disabled".

Trying to mimic the behaviour below...

  const MyComponent = _props => (
    <View>
      <TouchableHighlight testID={'touchable'}>
        <Text>{'Foo'}</Text>
      </TouchableHighlight>
    </View>
  )

  const pressedCallback = jest.fn()
  const { getByTestId } = render(<MyComponent onPress={() => pressedCallback('bar')} />)
  fireEvent.press(getByTestId('touchable'))
  expect(pressedCallback).not.toBeCalled() //Expected mock function not to be called but it was called with: ["bar"]

[fwal]

Hmm seems like fireEvent traverses up the tree and call the function if found, that would make my use-case a bit trickier... https://github.com/callstack/react-native-testing-library/blob/master/src/fireEvent.js#L18

[thymikee]

Yup, that's a desired behavior – user may press a text, which in fact may trigger a parent press event handler.

[fwal]

Any idea on how I could test my behaviour? I basically don't set onPress on the touchable component if my prop disabled is true...

[thymikee]

cc @Esemesek

[thymikee]

I think it makes sense to stop bubbling just before root component, that would prevent this and seems like a sane solution, but haven't thought it through yet

[fwal]

Ah I could probably should swallow the onPress event in the TouchableHighlight if disabled is true rather than omitting to set the prop... 🤔

[fwal]

For example this works:

  const MyComponent = ({ disabled, onPress }) => (
    <View>
      <TouchableHighlight onPress={disabled ? () => {} : onPress} testID={'touchable'}>
        <Text>{'Foo'}</Text>
      </TouchableHighlight>
    </View>
  )

But then again I'm changing implementation to satisfy the test 😅

[thymikee]

I usually do both just in case, but I guess we could detect the "disabled" prop on the Core RN components like Touchable* and native Button.

[fwal]

There's probably more cases like this, like onScroll and scrollEnabled in ScrollView. However In my button case I'll probably leave it and rely on that the core components are properly tested.

[thymikee]

Yup, we have an idea on how to make it more generic without changing implementation of fireEvent. Bare with us while we're fixing this.

[thymikee]

Just merged #30 so the bug is fixed now (not released yet). As for disabled prop, this is something that should be fixed in RN mocks tbh. We'll need to think about simulating native events capturing as close as possible though (e.g. including capturing phase).