如果屏幕可见jest @ Test -库/Test本机@Test导航/本机

Question

我有下面的测试。有关这个问题的解释，请参阅评论。

  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.
    })
  });

“取消”按钮目前不执行任何操作。我希望测试失败，因为用户没有返回到“无活动”屏幕。它目前是通过的，因为findByText仍然返回Activities元素，即使它所在的屏幕不可见。

我该怎么写这个测试，这样它才会失败？如何正确检查“无活动”屏幕是否可见？

Answer 1

我发现您可以使用useIsFocused()钩子，然后根据isFocused值设置isFocused。有人知道这是否会造成不必要的开销吗？

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