Merge pull request #312 from thomasbertet/test-307-sort-object-recursive-loop

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

Author: Patrick Sachs

package.json

@@ -47,6 +47,8 @@
     "babel-register": "6.26.0",
     "conventional-changelog-cli": "2.0.5",
     "doctoc": "1.3.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "5.6.1",
     "eslint-config-algolia": "13.2.3",
     "eslint-config-prettier": "3.1.0",
@@ -82,5 +84,8 @@
   "dependencies": {
     "is-plain-object": "2.0.4",
     "stringify-object": "3.2.2"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "<rootDir>tests/setupTests.js"
   }
 }

src/index.spec.js

@@ -2,8 +2,9 @@
 
 /* eslint-disable react/no-string-refs */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
+import { mount } from 'enzyme';
 import reactElementToJSXString from './index';
 import AnonymousStatelessComponent from './AnonymousStatelessComponent';
 
@@ -1087,4 +1088,29 @@ describe('reactElementToJSXString(ReactElement)', () => {
       )
     ).toEqual(`<div render={<><div /><div /></>} />`);
   });
+
+  it('should not cause recursive loop when prop object contains an element', () => {
+    const Test = () => <div>Test</div>;
+
+    const Container = ({ title: { component } }) => <div>{component}</div>;
+
+    class App extends Component {
+      render() {
+        const inside = <Container title={{ component: <Test /> }} />;
+
+        const insideString = reactElementToJSXString(inside);
+
+        return (
+          <div>
+            {insideString}
+
+            <div id="hello" />
+
+            <p>Start editing to see some magic happen :)</p>
+          </div>
+        );
+      }
+    }
+    expect(mount(<App />).find('#hello')).toHaveLength(1);
+  });
 });

tests/setupTests.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });