Skip to content

Can't getByText for component that returns a fragment #866

Closed
@joebourne

Description

@joebourne

Describe the bug

Using the T component from @transifex/native, I am unable to getByText() any child component of <Text /> whose return is simply a fragment or string.

Expected behavior

The inner text of the fragment is found by getByText and returned.

Steps to Reproduce

import React from 'react';
import { Text } from 'react-native';
import { render } from '@testing-library/react-native';

// This is mocking T from @transifex/react that has similar but more complex functionality
function T({ _str }) {
  return _str; // same if returning <>{_str}</>
}

function Test() {
  return (
    <Text>
      <T _str="My String" />
    </Text>
  );
}

describe('Test', () => {
  it('should render the correct text', () => {
    const { debug, getByText, toJSON } = render(<Test />);

    debug();

    console.log(toJSON());

    expect(getByText('My String')).toBeTruthy();
  });
});

Output of console.log(toJSON()) is { type: 'Text', props: {}, children: [ 'My String' ] } and output of debug() is

<Text>
  My String
</Text> 

Versions

npmPackages:
@testing-library/react-native: ^8.0.0 => 8.0.0
react: ^16.13.1 => 16.14.0
react-native: ~0.63.4 => 0.63.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions