Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested custom Text componentns not working correctly

See original GitHub issue

Describe the bug

If custom Text components are nested and find with text, then the wrong other element is retrieved.

Steps to Reproduce

const CustomText = ({ children, ...props }: PropsWithChildren<TextProps>) => {
  return <Text {...props}>{children}</Text>;
};
CustomText.displayName = 'CustomText';

const NestedText = () => {
  return (
    <View>
      <CustomText testID="outer">
        <CustomText testID="inner1"></CustomText>
        <CustomText testID="inner2">Hello</CustomText>
      </CustomText>
    </View>
  );
};

it('wrong result', () => {
  const { getByText, debug } = render(<NestedText />);

  const element = getByText(/Hello/);
  debug();

  expect(element.props.testID).toBe('inner2');
});

  console.log
    <View>
      <Text
        testID="outer"
      >
        <Text
          testID="inner1"
        />
        <Text
          testID="inner2"
        >
          Hello
        </Text>
      </Text>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)


Error: expect(received).toBe(expected) // Object.is equality

Expected: "inner2"
Received: "outer"
<Click to see difference>


    at Object.<anonymous> (/Users/mj/Desktop/Turing/MathKing/src/components/shared/AiTeacherCommentText.test.tsx:79:32)
    at Object.asyncJestTest (/Users/mj/Desktop/Turing/MathKing/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:100:37)
    at /Users/mj/Desktop/Turing/MathKing/node_modules/jest-jasmine2/build/queueRunner.js:47:12
    at new Promise (<anonymous>)
    at mapper (/Users/mj/Desktop/Turing/MathKing/node_modules/jest-jasmine2/build/queueRunner.js:30:19)
    at /Users/mj/Desktop/Turing/MathKing/node_modules/jest-jasmine2/build/queueRunner.js:77:41
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Versions

  npmPackages:
    @testing-library/react-native: 7.0.2 => 7.0.2 
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
    react-test-renderer: 16.13.1 => 16.13.1

Issue Analytics

State:
Created 3 years ago
Comments:12 (8 by maintainers)

Top GitHub Comments

1reaction

mikeduminycommented, Oct 13, 2020

This sounds like some effort needs to go into this feature. I personally don’t need it, what I need is parity with v6 for getByText, which is why I suggested bringing back the simple get text node implementation and having the current smarter implementation behind a flag.

1reaction

mym0404commented, Aug 19, 2020

Ok I will try Thank you 😃

Top Results From Across the Web

[Android] Custom fonts not applied on nested text #20398

One custom font nested with a system font works fine. I am not sure if it is a problem with these specific fonts,...

Text Override doesn't work on nested variants with ...

The only seeming workaround to this as unintuitive it sounds - don't use atomic base structure. That's right - design your component, prototype ......

Nested Text element onPress has no effect, why is that?

I have a component in which I use hook useNavigation . In this component there is a Text element in which there is...

Nested package instances

Add nested instances and expose nested parameters · Select a nested instance of a UI Package that has parameters. · Click + next...

Using with Preprocessors

A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus.