点击作为 SectionList 组件的子视图

Question

我有呈现多行的 SectionList。我正在尝试点击 renderItem 中的视图。但我无法通过其 ID 访问该视图。

I have used this to tap the whole row view.

await element(by.id('SectionList')).atIndex(0).tap();

关于如何实现这一点有什么建议吗？谢谢！

Answer 1

你能试试下面这个非常简单的例子吗？

因为应该可以通过 testID 找到那些行。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  SectionList,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

class example extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View testID='container' style={styles.container}>
        <Text style={styles.h1}>Section List Test</Text>
        <SectionList
          testID='section_list'
          keyExtractor={item => item.record}
          sections={[
            {data: [{record: 'S1_Record1'}, {record: 'S1_Record2'}], key: 'Section 1'},
            {data: [{record: 'S2_Record1'}, {record: 'S2_Record2'}], key: 'Section 2'},
            {data: [{record: 'S3_Record1'}, {record: 'S3_Record2'}], key: 'Section 3'},
          ]}
          renderSectionHeader={item => <Text style={styles.h2}>{item.section.key}</Text>}
          renderItem={item => (
            <View testID={item.item.record}>
              <TouchableOpacity
                onPress={() => alert(item.item.record)}
              >
                <Text style={styles.record}>{item.item.record}</Text>
              </TouchableOpacity>
            </View>
          )}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20,
    paddingTop: 40
  },
  h1: {
    padding: 20,
    fontSize: 30
  },
  h2: {
    padding: 5,
    fontSize: 20
  },
  record: {
    padding: 5
  }
})

AppRegistry.registerComponent('example', () => example);

这是对运行的测试：

describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('SectionList Test', async () => {
    await expect(element(by.id('container'))).toBeVisible();
    await expect(element(by.id('section_list'))).toBeVisible();
    await element(by.id('S2_Record1')).tap();
  });
});

你应该这样结束：

点击作为 SectionList 组件的子视图

Tap a view that is child of SectionList component

react-native

detox