fix: immediate setState in useEffect for unstable_validateStringsRenderedWithinText (#1612)

* fix: immediate setState in useEffect for unstable_validateStringsRenderedWithinText

* refactor: tweaks

---------

Co-authored-by: Maciej Jastrzębski <[email protected]>

Author: precious-void

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 <View> component.`,
   );
 });
+
+const UseEffectComponent = () => {
+  const [showText, setShowText] = React.useState(false);
+
+  React.useEffect(() => {
+    setShowText(true);
+  }, []);
+
+  if (!showText) {
+    return <Text>Text is hidden</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Text is visible</Text>
+    </View>
+  );
+};
+
+test('should render immediate setState in useEffect properly', async () => {
+  render(<UseEffectComponent />, { 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>Text is hidden</Text>;
+  }
+
+  return <View>Text is visible</View>;
+};
+
+test('should throw properly for immediate setState in useEffect', () => {
+  expect(() =>
+    render(<InvalidUseEffectComponent />, { unstable_validateStringsRenderedWithinText: true }),
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "Text is visible" string within a <View> component.`,
+  );
+});

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<T>(
   component: React.ReactElement<T>,
   options: Omit<RenderOptions, 'unstable_validateStringsRenderedWithinText'> = {},
 ) {
+  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<T>(
     </Profiler>
   );
 
-  const renderer = renderWithAct(wrap(component), testRendererOptions);
+  renderer = renderWithAct(wrap(component), testRendererOptions);
+
   validateStringsRenderedWithinText(renderer.toJSON());
 
   return buildRenderResult(renderer, wrap);