點擊作為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();
  });
});

您應該以此結束：