Feat : emulate string outside text error (#1070)

Author: pierrezimmermannbam

src/__tests__/__snapshots__/render.test.tsx.snap

@@ -32,18 +32,15 @@ exports[`debug 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function onBlur]}
     onClick={[Function onClick]}
+    onFocus={[Function onFocus]}
     onResponderGrant={[Function onResponderGrant]}
     onResponderMove={[Function onResponderMove]}
     onResponderRelease={[Function onResponderRelease]}
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
   >
     <Text>
       Change freshness!
@@ -97,18 +94,15 @@ exports[`debug changing component: bananaFresh button message should now be "fre
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function onBlur]}
     onClick={[Function onClick]}
+    onFocus={[Function onFocus]}
     onResponderGrant={[Function onResponderGrant]}
     onResponderMove={[Function onResponderMove]}
     onResponderRelease={[Function onResponderRelease]}
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
   >
     <Text>
       Change freshness!
@@ -266,18 +260,15 @@ exports[`debug: with message 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    onBlur={[Function onBlur]}
     onClick={[Function onClick]}
+    onFocus={[Function onFocus]}
     onResponderGrant={[Function onResponderGrant]}
     onResponderMove={[Function onResponderMove]}
     onResponderRelease={[Function onResponderRelease]}
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
   >
     <Text>
       Change freshness!
@@ -303,19 +294,16 @@ exports[`toJSON 1`] = `
 <View
   accessible={true}
   collapsable={false}
-  focusable={false}
+  focusable={true}
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "opacity": 1,
-    }
-  }
 >
   <Text>
     press me

src/__tests__/render-stringValidation.test.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { render, fireEvent } from '..';
+
+// eslint-disable-next-line no-console
+const originalConsoleError = console.error;
+
+const VALIDATION_ERROR =
+  'Invariant Violation: Text strings must be rendered within a <Text> component';
+const PROFILER_ERROR = 'The above error occurred in the <Profiler> component';
+
+beforeEach(() => {
+  // eslint-disable-next-line no-console
+  console.error = (errorMessage: string) => {
+    if (!errorMessage.includes(PROFILER_ERROR)) {
+      originalConsoleError(errorMessage);
+    }
+  };
+});
+
+afterEach(() => {
+  // eslint-disable-next-line no-console
+  console.error = originalConsoleError;
+});
+
+test('should throw when rendering a string outside a text component', () => {
+  expect(() =>
+    render(<View>hello</View>, {
+      unstable_validateStringsRenderedWithinText: true,
+    })
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should throw an error when rerendering with text outside of Text component', () => {
+  const { rerender } = render(<View />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() => rerender(<View>hello</View>)).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+const InvalidTextAfterPress = () => {
+  const [showText, setShowText] = React.useState(false);
+
+  if (!showText) {
+    return (
+      <Pressable onPress={() => setShowText(true)}>
+        <Text>Show text</Text>
+      </Pressable>
+    );
+  }
+
+  return <View>text rendered outside text component</View>;
+};
+
+test('should throw an error when strings are rendered outside Text', () => {
+  const { getByText } = render(<InvalidTextAfterPress />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() => fireEvent.press(getByText('Show text'))).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "text rendered outside text component" string within a <View> component.`
+  );
+});
+
+test('should not throw for texts nested in fragments', () => {
+  expect(() =>
+    render(
+      <Text>
+        <>hello</>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('should not throw if option validateRenderedString is false', () => {
+  expect(() => render(<View>hello</View>)).not.toThrow();
+});
+
+test(`should throw when one of the children is a text and the parent is not a Text component`, () => {
+  expect(() =>
+    render(
+      <View>
+        <Text>hello</Text>
+        hello
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test(`should throw when a string is rendered within a fragment rendered outside a Text`, () => {
+  expect(() =>
+    render(
+      <View>
+        <>hello</>
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should throw if a number is rendered outside a text', () => {
+  expect(() =>
+    render(<View>0</View>, { unstable_validateStringsRenderedWithinText: true })
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "0" string within a <View> component.`
+  );
+});
+
+const Trans = ({ i18nKey }: { i18nKey: string }) => <>{i18nKey}</>;
+
+test('should throw with components returning string value not rendered in Text', () => {
+  expect(() =>
+    render(
+      <View>
+        <Trans i18nKey="hello" />
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should not throw with components returning string value rendered in Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <Trans i18nKey="hello" />
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('should throw when rendering string in a View in a Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <View>hello</View>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});

src/__tests__/render.test.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  SafeAreaView,
-} from 'react-native';
+import { View, Text, TextInput, Pressable, SafeAreaView } from 'react-native';
 import stripAnsi from 'strip-ansi';
 import { render, fireEvent, RenderAPI } from '..';
 
@@ -21,9 +15,9 @@ const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 class MyButton extends React.Component<any> {
   render() {
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
+      <Pressable onPress={this.props.onPress}>
         <Text>{this.props.children}</Text>
-      </TouchableOpacity>
+      </Pressable>
     );
   }
 }

src/helpers/stringValidation.ts

@@ -0,0 +1,36 @@
+import { ReactTestRendererNode } from 'react-test-renderer';
+
+export const validateStringsRenderedWithinText = (
+  rendererJSON: ReactTestRendererNode | Array<ReactTestRendererNode> | null
+) => {
+  if (!rendererJSON) return;
+
+  if (Array.isArray(rendererJSON)) {
+    rendererJSON.forEach(validateStringsRenderedWithinTextForNode);
+    return;
+  }
+
+  return validateStringsRenderedWithinTextForNode(rendererJSON);
+};
+
+const validateStringsRenderedWithinTextForNode = (
+  node: ReactTestRendererNode
+) => {
+  if (typeof node === 'string') {
+    return;
+  }
+
+  if (node.type !== 'Text') {
+    node.children?.forEach((child) => {
+      if (typeof child === 'string') {
+        throw new Error(
+          `Invariant Violation: Text strings must be rendered within a <Text> component. Detected attempt to render "${child}" string within a <${node.type}> component.`
+        );
+      }
+    });
+  }
+
+  if (node.children) {
+    node.children.forEach(validateStringsRenderedWithinTextForNode);
+  }
+};

src/render.tsx

@@ -1,16 +1,19 @@
 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 from './helpers/debugDeep';
 import { getQueriesForElement } from './within';
-import { setRenderResult } from './screen';
+import { setRenderResult, screen } from './screen';
+import { validateStringsRenderedWithinText } from './helpers/stringValidation';
 
 export type RenderOptions = {
   wrapper?: React.ComponentType<any>;
   createNodeMock?: (element: React.ReactElement) => any;
+  unstable_validateStringsRenderedWithinText?: boolean;
 };
 
 type TestRendererOptions = {
@@ -25,17 +28,65 @@ export type RenderResult = ReturnType<typeof render>;
  */
 export default function render<T>(
   component: React.ReactElement<T>,
-  { wrapper: Wrapper, createNodeMock }: RenderOptions = {}
+  {
+    wrapper: Wrapper,
+    createNodeMock,
+    unstable_validateStringsRenderedWithinText,
+  }: RenderOptions = {}
 ) {
-  const wrap = (innerElement: React.ReactElement) =>
-    Wrapper ? <Wrapper>{innerElement}</Wrapper> : innerElement;
+  if (unstable_validateStringsRenderedWithinText) {
+    return renderWithStringValidation(component, {
+      wrapper: Wrapper,
+      createNodeMock,
+    });
+  }
+
+  const wrap = (element: React.ReactElement) =>
+    Wrapper ? <Wrapper>{element}</Wrapper> : element;
 
   const renderer = renderWithAct(
     wrap(component),
     createNodeMock ? { createNodeMock } : undefined
   );
+
+  return buildRenderResult(renderer, wrap);
+}
+
+function renderWithStringValidation<T>(
+  component: React.ReactElement<T>,
+  {
+    wrapper: Wrapper,
+    createNodeMock,
+  }: Omit<RenderOptions, 'unstable_validateStringsRenderedWithinText'> = {}
+) {
+  const handleRender: React.ProfilerProps['onRender'] = (_, phase) => {
+    if (phase === 'update') {
+      validateStringsRenderedWithinText(screen.toJSON());
+    }
+  };
+
+  const wrap = (element: React.ReactElement) => (
+    <Profiler id="renderProfiler" onRender={handleRender}>
+      {Wrapper ? <Wrapper>{element}</Wrapper> : element}
+    </Profiler>
+  );
+
+  const renderer = renderWithAct(
+    wrap(component),
+    createNodeMock ? { createNodeMock } : undefined
+  );
+  validateStringsRenderedWithinText(renderer.toJSON());
+
+  return buildRenderResult(renderer, wrap);
+}
+
+function buildRenderResult(
+  renderer: ReactTestRenderer,
+  wrap: (element: React.ReactElement) => JSX.Element
+) {
   const update = updateWithAct(renderer, wrap);
   const instance = renderer.root;
+
   const unmount = () => {
     act(() => {
       renderer.unmount();