diff --git a/src/__tests__/render-string-validation.test.tsx b/src/__tests__/render-string-validation.test.tsx index 259e26c93..2eba3ab27 100644 --- a/src/__tests__/render-string-validation.test.tsx +++ b/src/__tests__/render-string-validation.test.tsx @@ -155,3 +155,49 @@ test('should throw when rendering string in a View in a Text', () => { `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a component.`, ); }); + +const UseEffectComponent = () => { + const [showText, setShowText] = React.useState(false); + + React.useEffect(() => { + setShowText(true); + }, []); + + if (!showText) { + return Text is hidden; + } + + return ( + + Text is visible + + ); +}; + +test('should render immediate setState in useEffect properly', async () => { + render(, { unstable_validateStringsRenderedWithinText: true }); + + expect(await screen.findByText('Text is visible')).toBeTruthy(); +}); + +const InvalidUseEffectComponent = () => { + const [showText, setShowText] = React.useState(false); + + React.useEffect(() => { + setShowText(true); + }, []); + + if (!showText) { + return Text is hidden; + } + + return Text is visible; +}; + +test('should throw properly for immediate setState in useEffect', () => { + expect(() => + render(, { unstable_validateStringsRenderedWithinText: true }), + ).toThrow( + `${VALIDATION_ERROR}. Detected attempt to render "Text is visible" string within a component.`, + ); +}); diff --git a/src/render.tsx b/src/render.tsx index a73addbe4..69d27b53e 100644 --- a/src/render.tsx +++ b/src/render.tsx @@ -10,7 +10,7 @@ import debugShallow from './helpers/debug-shallow'; import { configureHostComponentNamesIfNeeded } from './helpers/host-component-names'; import { validateStringsRenderedWithinText } from './helpers/string-validation'; import { renderWithAct } from './render-act'; -import { setRenderResult, screen } from './screen'; +import { setRenderResult } from './screen'; import { getQueriesForElement } from './within'; export interface RenderOptions { @@ -64,11 +64,12 @@ function renderWithStringValidation( component: React.ReactElement, options: Omit = {}, ) { + let renderer: ReactTestRenderer; const { wrapper: Wrapper, ...testRendererOptions } = options ?? {}; - const handleRender: React.ProfilerProps['onRender'] = (_, phase) => { - if (phase === 'update') { - validateStringsRenderedWithinText(screen.toJSON()); + const handleRender: React.ProfilerOnRenderCallback = (_, phase) => { + if (renderer && phase === 'update') { + validateStringsRenderedWithinText(renderer.toJSON()); } }; @@ -78,7 +79,8 @@ function renderWithStringValidation( ); - const renderer = renderWithAct(wrap(component), testRendererOptions); + renderer = renderWithAct(wrap(component), testRendererOptions); + validateStringsRenderedWithinText(renderer.toJSON()); return buildRenderResult(renderer, wrap);