getAllByTestId returns empty list while getByTestId returns an item

[PMabMI]

Versions

react: 16.9.0
react-native: 0.61.5
react-native-testing-library: 1.13.0
react-test-renderer: 16.9.0

Description

When attempting to find multiple items with the same testID property (FlatList render item), I am unable to fetch any test components using getAllByTestId.

getByTestId does return the first item with that test ID in the virtual DOM.

I am able to get all of the test items by using the test renderer directly and doing a findAllByProp query from there.

Reproducible Demo

import { render, RenderAPI } from 'react-native-testing-library';
import { FlatList, Text } from 'react-native';
import { create } from 'react-test-renderer';

class ListItem extends React.Component<{ testID: string }> {
  render() {
    return <Text>foo</Text>;
  }
}

it('should have two items', () => {
  const renderer = render((
    <FlatList data={[{}, {}]} renderItem={() => <ListItem testID="listItem" />} />
  ));
  expect(renderer.getAllByTestId('listItem')).toHaveLength(2);
});

it('should have two items', () => {
  const renderer = create((
    <FlatList data={[{}, {}]} renderItem={() => <ListItem testID="listItem" />} />
  ));
  expect(renderer.root.findAllByProps({ testID: 'listItem' })).toHaveLength(2);
});

[thymikee]

There's a bug in how getByTestId works. getAllByTestId is correct. Will leave that open so it stays clear. Fixing that means a breaking change.

[thymikee]

In the meantime, do yourself a favor and, please, never use ById queries. You don't need them really.

[PMabMI]

Ok, I looked at the source code and see that there's a filter where the type of "type" should be string. I'm new to React and React Native, so forgive me if this is a dumb question, but all of the "type"s that I have in my test are "object" and "function". What am I doing wrong here, as I am unable to get any of the test instances from the queries that have this filter?

[thymikee]

The type of string for a react element means it's "host" element - platform specific, like div or View. The purpose of testID is that it propagates to the native view, so it's accessible by e2e test frameworks. We don't do that filtering in getById and that's wrong.

Instead of grabbing components by id you should check something observable - a text, a value or accessibility props. Use these marchers. If you can't grab something using those, your users can't do it as well. Keep that in mind

[PMabMI]

Ok, I understand how it works now. The problem I was running into was I was attempting to use the props on custom components to fetch them in unit tests. Now that I read the updated documentation after the last release that renamed "getByType" I see that it wasn't saying I should move away from those for all cases, and they are still useful in unit testing scenarios.

I appreciate your help, it gave me some good insight into component testing approaches.

[thymikee]

Just to be clear, we will fix that bug in v2. Until then, if you want to use getByTestId reliably, please use getAllByTestId('id')[0] or better, migrate off of testIDs.

In one of the last 1.x versions we may output a warning to make you aware that current behavior is buggy. We could also add a hint in v2 that "you may rely on buggy behavior from v1" when getByTestId fails.

[thymikee]

The fix is on the next branch and will be featured in 2.0 release. We'll let you know once this is ready for testing