question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fireEvent seems to always trigger event (on disabled TouchableOpacity)

See original GitHub issue

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"]

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:28 (14 by maintainers)

github_iconTop GitHub Comments

7reactions
ManuViola77commented, Jun 16, 2022

could it be this bug is back again? Because Im testing with the extended version that is disabled like this:

expect(something).toBeDisabled();

and this passes correctly but then I do this:

fireEvent.press(something);
expect(function).toHaveBeenCalledTimes(0);

and this fails saying it was called 1 time 😢

Im using "@testing-library/react-native": "^9.1.0"

6reactions
fwalcommented, Oct 12, 2018

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 😅

Read more comments on GitHub >

github_iconTop Results From Across the Web

API | React Native Testing Library - Open Source
Unmount the in-memory tree, triggering the appropriate lifecycle events. ... 7.0 fireEvent performs checks that should prevent events firing on disabled ...
Read more >
TouchableOpacity does not show disabled and activeOpacity ...
I can call disabled prop by using fireEvent(button, 'press') . Disabled button will not call the handler, so I can assert it with ......
Read more >
react testing library button disabled - You.com | The AI Search ...
Describe the bug. Disabled calls onPress on fireEvent. press when rendered with a wrapper, but does not rendered without a wrapper.
Read more >
Component Testing using React Native testing Library
The question is: how to know if the entered value 'element' has appeared in the list after triggering the press event? We can...
Read more >
React Native touchable vs. pressable components
The TouchableOpacity component; The TouchableHighlight component ... Disable the opacity animation and the touch event callbacks with the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found