test(ReactElementToJsxString): Add test when dealing with element inside prop object

Author: Thomas Bertet

src/index.spec.js

@@ -1087,4 +1087,67 @@ describe('reactElementToJSXString(ReactElement)', () => {
       )
     ).toEqual(`<div render={<><div /><div /></>} />`);
   });
+
+  it('should not cause recursive loop when prop object contains an element', () => {
+    const FunctionComp = () => {
+      return <span>hello func</span>;
+    };
+
+    class ClassComp extends React.Component {
+      render() {
+        return <span>hello class</span>;
+      }
+    }
+
+    class MainComp extends React.Component {
+      render() {
+        return <div {...this.props} />;
+      }
+    }
+
+    // Simple test, one level of nesting.
+    const elementToTest = (
+      <MainComp
+        title={{ comp: <FunctionComp /> }}
+        subtitle={{ anotherComp: <ClassComp /> }}
+      />
+    );
+
+    const jsxString = reactElementToJSXString(elementToTest);
+    expect(jsxString).toBe(`<MainComp
+  subtitle={{
+    anotherComp: <ClassComp />
+  }}
+  title={{
+    comp: <FunctionComp />
+  }}
+/>`);
+
+    // Deep nested component inside props.
+    const nestedElementToTest = (
+      <MainComp
+        title={{
+          comp: (
+            <MainComp
+              some={{
+                content: (
+                  <ClassComp other={{ nested: { comp: <FunctionComp /> } }} />
+                ),
+              }}
+            />
+          ),
+        }}
+        subtitle={{ anotherComp: <ClassComp /> }}
+      />
+    );
+    const nestedJsxString = reactElementToJSXString(nestedElementToTest);
+    expect(nestedJsxString).toBe(`<MainComp
+  subtitle={{
+    anotherComp: <ClassComp />
+  }}
+  title={{
+    comp: <MainComp some={{content: <ClassComp other={{nested: {comp: <FunctionComp />}}} />}} />
+  }}
+/>`);
+  });
 });