Fix recursion with react elements

src/formatter/sortObject.js

@@ -7,15 +7,18 @@ function safeSortObject(value: any, seen: WeakSet<any>): any {
     return value;
   }
 
-  // return date, regexp and react element values as is
-  if (
-    value instanceof Date ||
-    value instanceof RegExp ||
-    React.isValidElement(value)
-  ) {
+  // return date and regexp values as is
+  if (value instanceof Date || value instanceof RegExp) {
     return value;
   }
 
+  // return react element as is but remove _owner key because it can lead to recursion
+  if (React.isValidElement(value)) {
+    const copyObj = { ...value };
+    delete copyObj._owner;
+    return copyObj;
+  }
+
   seen.add(value);
 
   // make a copy of array with each item passed through the sorting algorithm
@@ -27,9 +30,6 @@ function safeSortObject(value: any, seen: WeakSet<any>): any {
   return Object.keys(value)
     .sort()
     .reduce((result, key) => {
-      if (key === '_owner') {
-        return result;
-      }
       if (key === 'current' || seen.has(value[key])) {
         // eslint-disable-next-line no-param-reassign
         result[key] = '[Circular]';

src/formatter/sortObject.spec.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import React from 'react';
 import sortObject from './sortObject';
 
 describe('sortObject', () => {
@@ -42,4 +43,24 @@ describe('sortObject', () => {
       c: date,
     });
   });
+
+  it('should remove _owner key from react elements', () => {
+    const fixture = {
+      _owner: "_owner that doesn't belong to react element",
+      component: <div />,
+    };
+
+    expect(JSON.stringify(sortObject(fixture))).toEqual(
+      JSON.stringify({
+        _owner: "_owner that doesn't belong to react element",
+        component: {
+          $$typeof: Symbol('react.transitional.element'),
+          type: 'div',
+          key: null,
+          props: {},
+          _store: {},
+        },
+      })
+    );
+  });
 });