I'm trying to get an integration test working in React Native (using Jest and RN Testing Library) and all my other tests work as expected but this one it seems the fireEvent.press() stops actually firing off the onPress event from the button TouchableHighlight for a specific ponent

Workflow:

1. List of people
2. press nav item to pull up filters (narrow down list)
3. inside modal 2 options of filter types, select "people" filters
4. renders new list of filters and select one of these
5. updates list of people and closes modal
6. user presses "You know it" button
7. console.log() or setPerson in onButtonPress never fires

View with button

export default function PondLeadSnippet({person, setPerson}) {
  const onButtonPress = useCallback(() => {
    console.log("========> onButtonPress");
    setPerson({...person, flagged: true});
  }, [false]);

  return (
    <View style={Style.container}>
      <View style={Style.content}>
        <Label accessibilityRole='person-name' scale='medium'>{person.name}</Label>
        <Text style={Style.detail}>{detail}</Text>
        <Text>{person.flagged ? 'Flagged' : 'Not Flagged'}</Text>
      </View>

      <TouchableHighlight testID={`flag-person-${person.uuid}`} onPress={onButtonPress}}>
        <Text>You know it</Text>
      </TouchableHighlight>
    </View>
  );
}

My Test

    test.only('can flag a person from list', async () => {
      const { getByText, getAllByRole, findByTestId, getByTestId, store } = setup();
      const bobSaget = people[1];

      // Modal to view filters -> this works!
      const filter = await findByTestId('people-filters');
      await fireEvent.press(filter);

      // toggle between 2 lists of filters -> this works!
      await waitFor(() => expect(getByTestId("people-list")).toBeTruthy());
      fireEvent.press(getByTestId("people-list"));

      // select filter -> this works!
      const peopleFilter = await findByTestId(`list-item-${someID}`);
      fireEvent.press(peopleFilter);

      // wait for list of people to update and modal closed
      await waitFor(() => expect(getAllByRole('person-name')).toHaveLength(2));
      const [ first, second ] = getAllByRole('person-name');
      expect(first.children).toContain("Bob S.")

      // press "Flag Person" button on person -> Does not work
      expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();
      fireEvent.press(getByTestId(`flag-person-${bobSaget.uuid}`));

      // after event rerender should happen w/ new text element w/ "Flagged"
      await waitFor(() => expect(getByText("Flagged")).toBeTruthy());
    });

I'm trying to get an integration test working in React Native (using Jest and RN Testing Library) and all my other tests work as expected but this one it seems the fireEvent.press() stops actually firing off the onPress event from the button TouchableHighlight for a specific ponent

Workflow:

1. List of people
2. press nav item to pull up filters (narrow down list)
3. inside modal 2 options of filter types, select "people" filters
4. renders new list of filters and select one of these
5. updates list of people and closes modal
6. user presses "You know it" button
7. console.log() or setPerson in onButtonPress never fires

View with button

export default function PondLeadSnippet({person, setPerson}) {
  const onButtonPress = useCallback(() => {
    console.log("========> onButtonPress");
    setPerson({...person, flagged: true});
  }, [false]);

  return (
    <View style={Style.container}>
      <View style={Style.content}>
        <Label accessibilityRole='person-name' scale='medium'>{person.name}</Label>
        <Text style={Style.detail}>{detail}</Text>
        <Text>{person.flagged ? 'Flagged' : 'Not Flagged'}</Text>
      </View>

      <TouchableHighlight testID={`flag-person-${person.uuid}`} onPress={onButtonPress}}>
        <Text>You know it</Text>
      </TouchableHighlight>
    </View>
  );
}

My Test

    test.only('can flag a person from list', async () => {
      const { getByText, getAllByRole, findByTestId, getByTestId, store } = setup();
      const bobSaget = people[1];

      // Modal to view filters -> this works!
      const filter = await findByTestId('people-filters');
      await fireEvent.press(filter);

      // toggle between 2 lists of filters -> this works!
      await waitFor(() => expect(getByTestId("people-list")).toBeTruthy());
      fireEvent.press(getByTestId("people-list"));

      // select filter -> this works!
      const peopleFilter = await findByTestId(`list-item-${someID}`);
      fireEvent.press(peopleFilter);

      // wait for list of people to update and modal closed
      await waitFor(() => expect(getAllByRole('person-name')).toHaveLength(2));
      const [ first, second ] = getAllByRole('person-name');
      expect(first.children).toContain("Bob S.")

      // press "Flag Person" button on person -> Does not work
      expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();
      fireEvent.press(getByTestId(`flag-person-${bobSaget.uuid}`));

      // after event rerender should happen w/ new text element w/ "Flagged"
      await waitFor(() => expect(getByText("Flagged")).toBeTruthy());
    });

• javascript
• react-native
• jestjs

2 Answers 2

Using the test library, I realized the following. When rendering the ponent with an onPress event, the render converts it to an onClick. According to the logic of the library it will never work. To solve it I did the following.

import {
  fireEvent,
  render
} from '@testing-library/react-native';

const element = render(
  <Presseable onPress={()=>console.log('press')}>
     <Text>I'm pressable!</Text>
  </Pressable>
);

const { getByTestId } = element;

const button= getByTestId('pressable');

fireEvent(button, 'click'); // that's how it works

fireEvent(button, 'press'); // this is the equivalent to fireEvent.press(button) It does not work like this

Your TouchableHighlight might have not been rendered when you try fire event. Try to replace

 expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();

with

 await waitFor(() => {
     expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();
   })