A way to get at top level rendered element

Describe the Feature

At my company, we have a few uses case where we want to make assertion on the top level rendered element. Pre v7, we were able to do const element = view.container.children?.[0] || null. Is there a way to get the same result for post v7 without adding additional testID?

Trivial use cases example:

const Component = (render=true) => (render ? <View></View> : null);

// assert that component render when render is true
// assert that component render nothing when render is false

Possible Implementations

I see that we have renderer.root here. Maybe just have to expose that element

Related Issues

https://github.com/callstack/react-native-testing-library/issues/477#issuecomment-699096451

[klekowskim]

IMHO this can be added, but together with exporting the root component 😃 Trying to hide the element that is needed to work with custom queries, and it is also returned from the query is just not logical. I can prepare workaround to have this root container either using wrapper option or suggested by you extendWithQueries.

1. Workaround using new extendWithQueries:

const getRoot = (container) => { return container }
const {getRoot} = render(<Comp />, {extendWithQueries: {getByTextWithType}});
const root = getRoot()

1. Workaround using wrapper

function render(component, options) {
const result = render(component, {...options, wrapper: <View testId='root'>{children}</View>}});
const root = getByTestId('root');
return {...result, root };
}

I believe that either we agree that root/container and custom queries are allowed or not. I understand that the goal is to prevent testing internal things and creating more stable tests. But not exporting the root is not doing that. Additionally there are exported queries that brakes the rules.

In react-testing-library you have access to the DOM of rendered components. With that you can of course use .parentNode, children or check the attributes. But is not recommended. The similar situation is here and not exporting root does not change anything, besides forcing users to do workarounds 😃

[thymikee]

Together with @pvinis we found a way to expose root ReactTestInstance without making it too easy to use – through an API designed to extend default queries. Here’s a rough idea: https://github.com/callstack/react-native-testing-library/pull/569#issuecomment-705494579

const getByTextWithType = (root) => { ... }
const customRender = render<typeof getByTextWithType>(<Comp />, {extendWithQueries: {getByTextWithType}});
const {getByTextWithType} = customRender(<Comp />)