use Enzyme to use React lifecycles & really test sortObject fix

Author: Thomas Bertet

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

@@ -1087,67 +1087,4 @@ 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 />}}} />}} />
-  }}
-/>`);
-  });
 });

tests/owner/owner.spec.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types , no-console */
+import React, { Component } from 'react';
+import reactElementToJSXString from '../../src';
+
+import { mount } from 'enzyme';
+
+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>
+    );
+  }
+}
+
+describe('reactElementToJSXString', () => {
+  it('should not cause recursive loop when prop object contains an element', () => {
+    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() });