Unable to find element with text when using react-native-popover-view

[sharat-brl]

Describe the bug

When using react-native-popover-view I am unable to get the element by getByText and shows error Unable to find an element with text: Hello
I am not sure if this is an error on testing libraray or the package so let me know if I need to raise issue on package repo

Expected behavior

Should not throw error.

Steps to Reproduce

import { TouchableOpacity, Text } from 'react-native';
import Popover from 'react-native-popover-view';

it.only('Pop test', async () => {
        render(
            <>
                <Popover
                    from={
                        <TouchableOpacity>
                            <Text>Hi</Text>
                        </TouchableOpacity>
                    }
                >
                    <Text>Hello</Text>
                </Popover>
            </>,
        );
        const ll = screen.debug();
        const element = await screen.getByText('Hi');
        fireEvent.press(element);
        const l = screen.debug();

        const check = await screen.getByText('Hello');
    });

You can reproduce this by expo latest 52 and installing "react-native-popover-view": "^6.0.1"

[mdjastrzebski]

Please add debug() call to your test and inspect the rendered element tree.
Looking at the test, it might also be due to popover view doing the transition asynchronously you can try swaping screen.getByText('Hello'); to await screen.findByText('Hello');

[sharat-brl]

@mdjastrzebski I have tried your suggestion and it does show Modal but it doesn't give the rendered component in modal.
Checked the console info before fireing the event and it doesn't have Modal

    [
      <View
        accessibilityState={
          {
            "busy": undefined,
            "checked": undefined,
            "disabled": undefined,
            "expanded": undefined,
            "selected": undefined,
          }
        }
        accessibilityValue={
          {
            "max": undefined,
            "min": undefined,
            "now": undefined,
            "text": undefined,
          }
        }
        accessible={true}
        collapsable={false}
        focusable={true}
        onClick={[Function onClick]}
        onResponderGrant={[Function onResponderGrant]}
        onResponderMove={[Function onResponderMove]}
        onResponderRelease={[Function onResponderRelease]}
        onResponderTerminate={[Function onResponderTerminate]}
        onResponderTerminationRequest={[Function onResponderTerminationRequest]}
        onStartShouldSetResponder={[Function onStartShouldSetResponder]}
        style={
          {
            "opacity": 1,
          }
        }
      >
        <Text>
          Hi
        </Text>
      </View>,
      <Modal
        hardwareAccelerated={true}
        onRequestClose={[Function onRequestClose]}
        onShow={[Function onShow]}
        statusBarTranslucent={true}
        supportedOrientations={
          [
            "portrait",
            "portrait-upside-down",
            "landscape",
          ]
        }
        transparent={true}
        visible={true}
      />,
    ]

updated the details in description as well

[mdjastrzebski]

Sa the debug function suggests the <Text>Hello</Text> element is not in the element tree. That's why RNTL cannot find it.

Try also chaning:

const check = await screen.getByText('Hello');

to

const check = await screen.findByText('Hello');

(find not get)

[sharat-brl]

@mdjastrzebski Still same issue with findByText as well

[mdjastrzebski]

Then this is issue with the Popover View library you are using. RNTL "sees" the element tree output by debug helper. If "Hello" text is not there, the Popover View library is not rendering it for some reason. Check their docs and source code for info about testing/mocking.