Tap a view that is child of SectionList component

Question

I have SectionList which is rendering multiple rows. I am trying to tap a view that is in the renderItem. but I was not able to reach that view by its ID.

I have used this to tap the whole row view.

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

Any suggestion on how this can be achieved? Thanks!

Answer 1

Can you try the following very simple example?

Because it should be possible to find those rows by 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);

And this as the test to run:

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

You should end up with this: