diff --git a/src/helpers/host-component-names.tsx b/src/helpers/host-component-names.tsx index b6b06a008..475ba8518 100644 --- a/src/helpers/host-component-names.tsx +++ b/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( Hello ); - const { getByTestId } = getQueriesForElement(renderer.root); const textHostName = getByTestId('text').type; const textInputHostName = getByTestId('textInput').type; diff --git a/src/render-act.ts b/src/render-act.ts new file mode 100644 index 000000000..ee7ceec74 --- /dev/null +++ b/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; +} diff --git a/src/render.tsx b/src/render.tsx index 79452fffd..11811b3f4 100644 --- a/src/render.tsx +++ b/src/render.tsx @@ -1,17 +1,17 @@ -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; @@ -19,10 +19,6 @@ export type RenderOptions = { unstable_validateStringsRenderedWithinText?: boolean; }; -type TestRendererOptions = { - createNodeMock: (element: React.ReactElement) => any; -}; - export type RenderResult = ReturnType; /** @@ -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