fix: improve element formatting

src/__tests__/__snapshots__/to-be-visible.tsx.snap

@@ -4,25 +4,21 @@ exports[`.toBeVisible throws an error when expectation is not matched 1`] = `
 "expect(element).not.toBeVisible()
 
 Received element is visible:
-  Object {
-  "props": Object {
-    "children": undefined,
-    "testID": "test",
-  },
-}"
+  <View
+    testID="test"
+  />"
 `;
 
 exports[`.toBeVisible throws an error when expectation is not matched 2`] = `
 "expect(element).toBeVisible()
 
 Received element is not visible:
-  Object {
-  "props": Object {
-    "children": undefined,
-    "style": Object {
-      "opacity": 0,
-    },
-    "testID": "test",
-  },
-}"
+  <View
+    style={
+      {
+        "opacity": 0,
+      }
+    }
+    testID="test"
+  />"
 `;

src/utils.ts

@@ -75,14 +75,24 @@ function printElement(element: ReactTestInstance | null) {
     return 'null';
   }
 
-  return `  ${prettyFormat(
-    { props: element.props },
-    {
-      plugins: [ReactTestComponent, ReactElement],
-      printFunctionName: false,
-      highlight: true,
-    },
-  )}`;
+  return redent(
+    prettyFormat(
+      {
+        // This prop is needed persuade the prettyFormat that the element is
+        // a ReactTestRendererJSON instance, so it is formatted as JSX.
+        $$typeof: Symbol.for('react.test.json'),
+        type: element.type,
+        props: element.props,
+      },
+      {
+        plugins: [ReactTestComponent, ReactElement],
+        printFunctionName: false,
+        printBasicPrototype: false,
+        highlight: true,
+      },
+    ),
+    2,
+  );
 }
 
 function display(value: unknown) {