1

I have the following test. See the comments for an explanation of the problem.

  describe('Cancel Button', () => {
    it('should navigate back to the previous screen', async () => {
      let { getByA11yLabel, findByText } = render(<Navigation />);
      await findByText('No Activities'); // Verifies the user is on the No Activities screen.
      const addButton = getByA11yLabel('Add New Activity'); 
      await fireEvent.press(addButton); // Takes the user to the New Activity screen.
      await findByText("New Activity"); // Verifies the user is on the New Activity Screen.
      const cancelButton = getByA11yLabel("Cancel"); // Finds cancel button.
      await fireEvent.press(cancelButton); // Clicks cancel button.  Currently this button does nothing.  It's onPress event does nothing.
      await findByText("No Activities"); // Verify the user is on the No Activities screen.  I would expect this to fail as the cancel button does not return the user to the previous screen.
    })
  });

The cancel button does not currently do anything. I want the test to fail because the user is not returned to the No Activities screen. It currently passes because the findByText still returns the No Activities element even though the screen it is on is not visible.

How should I write this test so it would fail? How do I properly check whether the No Activities screen is visible?

StewartArmbrecht
  • 1,221
  • 1
  • 10
  • 20

1 Answers1

1

I figured out you can use a useIsFocused() hook and then set the testID based on the isFocused value. Anyone know if this creates unnecessary overhead?

import { useIsFocused, useNavigation } from '@react-navigation/native';
...
const isFocused = useIsFocused();
...
<View testID={isFocused ? 'ActivityDetailsScreen' : 'ActivityDetailsScreenHidden'}>
StewartArmbrecht
  • 1,221
  • 1
  • 10
  • 20