Closed
Description
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