fireEvent.press does not work on TouchableOpacity

[hsjoberg]

• react-native or expo: react-native
• native-testing-library version: 5.0.3
• jest-preset: @testing-library/react-native
• react-native: 0.62.0-rc.3
• node version: v12.12.0

Relevant code or config:

import React from "react";
import { TouchableOpacity } from "react-native";
import { render, fireEvent } from "@testing-library/react-native";

it("test", async () => {
  const { findByTestId } = render(
    <TouchableOpacity testID="button" onPress={() => console.log("TEST")} />
  );
  const button = await findByTestId("button");
  fireEvent.press(button);
});

What you did:

In 0.62.0-rc.3, fireEvent.press does not seem to work at all on TouchableOpacity. Trying on for example a Button seems to work fine, just not TouchableOpacity (and presumably similar components).

Reproduction:

See example code above. Running it you should see a console logged "TEST" message, in 0.62.0-rc.3, it does not appear.

Can you help us fix this issue by submitting a pull request?

Yes, though I don't know what's wrong yet.

[akiver]

I had the same issue after upgrading to RN 0.62.
I think it's related to this issue facebook/react-native#27721.

displayName is missing and native-testing-library rely on it to fire events.

[Function: Component] {
      displayName: '', <- Supposed to be TouchableOpacity or TouchableHighlight
      '$$typeof': Symbol(react.forward_ref),
      render: [Function]
 }

[halilb]

Our tests have also broken after upgrading to RN 0.62. I've applied a temporary fix to make the tests pass again by mocking TouchableOpacity with TouchableHighlight in jest.setup.js file:

jest.mock(
  'react-native/Libraries/Components/Touchable/TouchableOpacity.js',
  () => {
    const { TouchableHighlight } = require('react-native')
    const MockTouchable = props => {
      return <TouchableHighlight {...props} />
    }
    MockTouchable.displayName = 'TouchableOpacity'

    return MockTouchable
  }
)

[hyochan]

Thanks for the issue. Having same problem. When I've updated the snapshot I see all the TouchableOpacity are gone.

[mym0404]

I am experiencing exactly the same thing.

[andrico1234]

@halilb Your fix worked for me!

[kevinpiac]

jest.mock(
'react-native/Libraries/Components/Touchable/TouchableOpacity.js',
() => {
const { TouchableHighlight } = require('react-native')
const MockTouchable = props => {
return <TouchableHighlight {...props} />
}
MockTouchable.displayName = 'TouchableOpacity'

return MockTouchable

}
)

@halilb Thanks for this solution, however, this fix is not totally working for me since it breaks a lot of other unit tests. 🤕

However, this simple snippet as mentioned here works fine for me :)

I hope it would help some mates 😃

⏬Working solution for me ⏬

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => 'TouchableOpacity');

[Zloka]

I'm running into the same issue when trying to the Button component of react-native-paper. It seems to use TouchableWithoutFeedback under the hood.

Any pointers on how I'd go about mocking that out? Using the above (but for TouchableWithoutFeedback) doesn't seem to do the trick 🤔

EDIT: Naturally got it working a few minutes after posting...
The following snippet did the trick in my case:

jest.mock(
  'react-native/Libraries/Components/Touchable/TouchableHighlight',
  () => {
    const TouchableHighlight = jest.requireActual(
      'react-native/Libraries/Components/Touchable/TouchableHighlight',
    );

    TouchableHighlight.displayName = 'TouchableHighlight';

    return TouchableHighlight;
  },
);

[michelalbers]

Can confirm the issue.

[daveols]

I've fixed this in #136 🎉