javascript - React-Native 日历议程没有 Detox 的 testID

Question

我正在为我的react-native项目使用detox，它有一个使用react-native-calendar中的议程组件的日历组件。我希望为议程组件添加一个 testID，但似乎没有。这是我的议程代码。

  <Agenda
    items={this.state.items}
    onDayPress={(day)=>{console.log('day pressed',day)}}
    onDayChange={(day)=>{console.log('day changed')}}
    pastScrollRange={50}
    futureScrollRange={50}
    renderItem={(item, firstItemInDay) => {return (<CalendarEvent EventID={item.EventID} navigation ={this.props.navigation}/>);}}


    renderEmptyDate={() => {return (<EmptyEvent/>);}}
    // specify what should be rendered instead of ActivityIndicator
    //renderEmptyData = {() => {return (<EmptyEvent/>)}}
    rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
    // By default, agenda dates are marked if they have at least one item, but you can override this if needed
    markedDates={markedDates}
    theme={{
                    backgroundColor: '#203546',
                    calendarBackground: '#203546',
                    textSectionTitleColor: '#ffffff',
                    selectedDayBackgroundColor: '#203546',
                    selectedDayTextColor: '#ffffff',
                    todayTextColor: '#00adf5',
                    dayTextColor: '#ffffff',
                    textDisabledColor: '#ffffff',
                    dotColor: '#ffffff',
                    selectedDotColor: '#ffffff',
                    monthTextColor: '#ffffff',
                    textMonthFontWeight: 'bold',
                    textDayFontSize: 16,
                    textMonthFontSize: 20,
                    textDayHeaderFontSize: 15,
                    agendaDayTextColor: 'white',
                    agendaDayNumColor: 'white',
                    agendaTodayColor: '#00adf5',
                    agendaKnobColor: 'white'
                    }}/>

Answer 1

快速search react-native-calendars 存储库的显示 testID 属性仅在 CalendarHeader 组件中受支持。

该库提供的其余组件似乎不支持 testID，但这并不意味着它们不能。

如果你看看排毒troubleshooting guide添加 testID 属性的状态是:

Solution: React Native only supports the testID prop on the native built-in components. If you've created a custom composite component, you will have to support this prop yourself. You should probably propagate the testID prop to one of your rendered children (a built-in component):

不幸的是，Agenda 组件不是您自己创建的，因此您无法对其 Prop 进行太多控制。您可以采取一些行动:

1. 创建一个问题，并希望存储库开发团队中的某个人做出您想要的更改。
2. fork 库。现在，您可以完全控制该组件。您将能够添加所需的 testID 属性。然后您可以使用该库的 fork 版本。这可能很有用，但请注意，您必须维护 fork 的存储库。您始终可以将更改作为 PR 提交，它可能会合并到实际版本中。

最快的解决方案显然是选项 2。然后您可以在 package.json 中使用 fork 版本，如下所示:

"react-native-calendars": "your_github_name/react-native-calendars"