detectHostComponentNames: render test tree inside act to avoid timer leaks (#1371)

* detectHostComponentNames: render test tree inside act to avoid timer leaks

* chore: tweaks

* refactor: extract common renderWithAct function

* chore: tweaks

---------

Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: jsnajdr

src/helpers/host-component-names.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import { Text, TextInput, View } from 'react-native';
-import TestRenderer from 'react-test-renderer';
 import { configureInternal, getConfig, HostComponentNames } from '../config';
+import { renderWithAct } from '../render-act';
 import { getQueriesForElement } from '../within';
 
 const userConfigErrorMessage = `There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
@@ -29,13 +29,12 @@ export function configureHostComponentNamesIfNeeded() {
 
 function detectHostComponentNames(): HostComponentNames {
   try {
-    const renderer = TestRenderer.create(
+    const renderer = renderWithAct(
       <View>
         <Text testID="text">Hello</Text>
         <TextInput testID="textInput" />
       </View>
     );
-
     const { getByTestId } = getQueriesForElement(renderer.root);
     const textHostName = getByTestId('text').type;
     const textInputHostName = getByTestId('textInput').type;

src/render-act.ts

@@ -0,0 +1,19 @@
+import TestRenderer from 'react-test-renderer';
+import type {
+  ReactTestRenderer,
+  TestRendererOptions,
+} from 'react-test-renderer';
+
+export function renderWithAct(
+  component: React.ReactElement,
+  options?: TestRendererOptions
+): ReactTestRenderer {
+  let renderer: ReactTestRenderer;
+
+  TestRenderer.act(() => {
+    renderer = TestRenderer.create(component, options);
+  });
+
+  // @ts-ignore act is synchronous, so renderer is already initialised here
+  return renderer;
+}

src/render.tsx

@@ -1,28 +1,24 @@
-import TestRenderer from 'react-test-renderer';
 import type { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
 import * as React from 'react';
 import { Profiler } from 'react';
 import act from './act';
 import { addToCleanupQueue } from './cleanup';
-import debugShallow from './helpers/debugShallow';
-import debugDeep, { DebugOptions } from './helpers/debugDeep';
-import { getQueriesForElement } from './within';
-import { setRenderResult, screen } from './screen';
-import { validateStringsRenderedWithinText } from './helpers/stringValidation';
 import { getConfig } from './config';
 import { getHostChildren } from './helpers/component-tree';
+import debugDeep, { DebugOptions } from './helpers/debugDeep';
+import debugShallow from './helpers/debugShallow';
 import { configureHostComponentNamesIfNeeded } from './helpers/host-component-names';
+import { validateStringsRenderedWithinText } from './helpers/stringValidation';
+import { renderWithAct } from './render-act';
+import { setRenderResult, screen } from './screen';
+import { getQueriesForElement } from './within';
 
 export type RenderOptions = {
   wrapper?: React.ComponentType<any>;
   createNodeMock?: (element: React.ReactElement) => any;
   unstable_validateStringsRenderedWithinText?: boolean;
 };
 
-type TestRendererOptions = {
-  createNodeMock: (element: React.ReactElement) => any;
-};
-
 export type RenderResult = ReturnType<typeof render>;
 
 /**
@@ -129,20 +125,6 @@ function buildRenderResult(
   return result;
 }
 
-function renderWithAct(
-  component: React.ReactElement,
-  options?: TestRendererOptions
-): ReactTestRenderer {
-  let renderer: ReactTestRenderer;
-
-  act(() => {
-    renderer = TestRenderer.create(component, options);
-  });
-
-  // @ts-ignore act is sync, so renderer is always initialised here
-  return renderer;
-}
-
 function updateWithAct(
   renderer: ReactTestRenderer,
   wrap: (innerElement: React.ReactElement) => React.ReactElement