React Native 测试库 fireEvent.press 不触发 onPress

Question

我正在尝试在 React Native 中进行集成测试（使用 Jest 和 RN 测试库），并且所有其他测试都按预期工作，但这个测试似乎停止了fireEvent.press()从特定组件的按钮实际触发事件的操作onPressTouchableHighlight

工作流程：

1. 人员名单
2. 按导航项拉出过滤器（缩小列表）
3. 在模式 2 过滤器类型选项中，选择“人员”过滤器
4. 呈现新的过滤器列表并选择其中之一
5. 更新人员列表并关闭模式
6. 用户按下“你知道”按钮
7. console.log()或者永远不会setPerson发生onButtonPress火灾

使用按钮查看

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

我的测试

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

Answer 1

当您尝试触发事件时，您的 TouchableHighlight 可能尚未呈现。尝试更换

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

和

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