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 component
Workflow:
- List of people
- press nav item to pull up filters (narrow down list)
- inside modal 2 options of filter types, select "people" filters
- renders new list of filters and select one of these
- updates list of people and closes modal
- user presses "You know it" button
console.log()orsetPersoninonButtonPressnever 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());
});