点击SectionList组件

Question

我有一个呈现多行的SectionList。我正在尝试点击renderItem中的视图。但是我无法通过其ID获得该观点。

  

我用它来点击整个行视图。

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

你应该最终得到这个：