Feat : emulate string outside text error

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!
@@ -299,23 +290,69 @@ exports[`debug: with message 1`] = `
 </View>"
 `;
 
+exports[`it should throw 
+      - when one of the children is a text
+      - and the parent is not a Text component 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "hello" string within a <View> component."
+`;
+
+exports[`it should throw 
+    - when a string is rendered within a fragment rendered outside a Text 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "hello" string within a <View> component."
+`;
+
+exports[`it should throw if a number is rendered outside a text: 
+    "Invariant Violation: Text strings must be rendered within a <Text> component.
+
+    Detected attempt to render "0" string within a <View> component."
+   1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "0" string within a <View> component."
+`;
+
+exports[`it should throw when rendering string in a View in a Text 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "hello" string within a <View> component."
+`;
+
+exports[`should throw an error when rerendering with text outside of Text component 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "hello" string within a <View> component."
+`;
+
+exports[`should throw an error when strings are rendered outside Text 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "text rendered outside text component" string within a <View> component."
+`;
+
+exports[`should throw when rendering a string outside a text component 1`] = `
+"Invariant Violation: Text strings must be rendered within a <Text> component.
+
+Detected attempt to render "hello" string within a <View> component."
+`;
+
 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.test.tsx

@@ -1,14 +1,10 @@
 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 '..';
 
+const originalConsoleError = console.error;
+
 type ConsoleLogMock = jest.Mock<Array<string>>;
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
@@ -21,9 +17,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>
     );
   }
 }
@@ -283,3 +279,154 @@ test('RenderAPI type', () => {
   render(<Banana />) as RenderAPI;
   expect(true).toBeTruthy();
 });
+
+test('should throw when rendering a string outside a text component', () => {
+  expect(() =>
+    render(<View>hello</View>, {
+      unstable_validateStringsRenderedWithinText: true,
+    })
+  ).toThrowErrorMatchingSnapshot();
+});
+
+const profilerErrorMessage =
+  'The above error occurred in the <Profiler> component';
+
+test('should throw an error when rerendering with text outside of Text component', () => {
+  // eslint-disable-next-line no-console
+  console.error = (errorMessage: string) => {
+    if (!errorMessage.includes(profilerErrorMessage)) {
+      originalConsoleError(errorMessage);
+    }
+  };
+  const { rerender } = render(<View />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() => rerender(<View>hello</View>)).toThrowErrorMatchingSnapshot();
+
+  // eslint-disable-next-line no-console
+  console.error = originalConsoleError;
+});
+
+const ErrorComponent = () => {
+  const [shouldDisplayText, setShouldDisplayText] = React.useState(false);
+
+  if (!shouldDisplayText) {
+    return (
+      <Pressable
+        onPress={() => {
+          setShouldDisplayText(true);
+        }}
+      >
+        <Text>Display text</Text>
+      </Pressable>
+    );
+  }
+
+  return <View>text rendered outside text component</View>;
+};
+
+test('should throw an error when strings are rendered outside Text', () => {
+  // eslint-disable-next-line no-console
+  console.error = (errorMessage: string) => {
+    if (!errorMessage.includes(profilerErrorMessage)) {
+      originalConsoleError(errorMessage);
+    }
+  };
+  const { getByText } = render(<ErrorComponent />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() =>
+    fireEvent.press(getByText('Display text'))
+  ).toThrowErrorMatchingSnapshot();
+
+  // eslint-disable-next-line no-console
+  console.error = originalConsoleError;
+});
+
+test('it should not throw for texts nested in fragments', () => {
+  expect(() =>
+    render(
+      <Text>
+        <>hello</>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('it should not throw if option validateRenderedString is false', () => {
+  expect(() => render(<View>hello</View>)).not.toThrow();
+});
+
+test(`it 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 }
+    )
+  ).toThrowErrorMatchingSnapshot();
+});
+
+test(`it should throw 
+    - when a string is rendered within a fragment rendered outside a Text`, () => {
+  expect(() =>
+    render(
+      <View>
+        <>hello</>
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrowErrorMatchingSnapshot();
+});
+
+test('it should throw if a number is rendered outside a text', () => {
+  expect(() =>
+    render(<View>0</View>, { unstable_validateStringsRenderedWithinText: true })
+  ).toThrowErrorMatchingSnapshot(`
+    "Invariant Violation: Text strings must be rendered within a <Text> component.
+
+    Detected attempt to render "0" string within a <View> component."
+  `);
+});
+
+const Trans = ({ i18nKey }: { i18nKey: string }) => <>{i18nKey}</>;
+
+test('it should throw with components returning string value not rendered in Text', () => {
+  expect(() =>
+    render(
+      <View>
+        <Trans i18nKey="hello" />
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow();
+});
+
+test('it should not throw with components returning string value rendered in Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <Trans i18nKey="hello" />
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('it should throw when rendering string in a View in a Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <View>hello</View>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrowErrorMatchingSnapshot();
+});

src/helpers/validateStringsRenderedWithinText.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.\n\nDetected attempt to render "${child}" string within a <${node.type}> component.`
+        );
+      }
+    });
+  }
+
+  if (node.children) {
+    node.children.forEach(validateStringsRenderedWithinTextForNode);
+  }
+};