feat(breaking): Output jest mock function names in snapshot diff

__tests__/__snapshots__/snapshotDiff.test.js.snap

@@ -53,13 +53,13 @@ exports[`can use contextLines with React components 1`] = `
 - <Component test=\\"say\\" />
 + <Component test=\\"my name\\" />
 
-@@ -6,1 +6,1 @@
+@@ -10,1 +10,1 @@
 -     say
 +     my name
-@@ -9,1 +9,1 @@
+@@ -13,1 +13,1 @@
 -     say
 +     my name
-@@ -32,1 +32,1 @@
+@@ -36,1 +36,1 @@
 -     say
 +     my name"
 `;
@@ -118,12 +118,12 @@ exports[`detects React components 1`] = `
 - <Component test=\\"say\\" />
 + <Component test=\\"my name\\" />
 
-@@ -1,14 +1,14 @@
-  <div>
-    <span />
-    <span />
-    <span />
-    <span>
+@@ -5,14 +5,14 @@
+    <span
+      onBlur={[Function onBlur]}
+      onClick={[MockFunction]}
+      onFocus={[MockFunction test-mock-name]}
+    >
 -     say
 +     my name
     </span>
@@ -135,7 +135,7 @@ exports[`detects React components 1`] = `
     <span />
     <span />
     <span />
-@@ -27,11 +27,11 @@
+@@ -31,11 +31,11 @@
     <span />
     <span />
     <span />
@@ -165,3 +165,21 @@ exports[`failed optional deps throws with sensible message on missing react-test
 "Failed to load optional module \\"react-test-renderer\\". If you need to compare React elements, please add \\"react-test-renderer\\" to your project's dependencies.
 Cannot find module 'non-existent-module-for-testing' from 'snapshotDiff.test.js'"
 `;
+
+exports[`shows diff when comparing React fragments of varying length 1`] = `
+"Snapshot Diff:
+- <FragmentComponent />
++ <FragmentComponent withSecond={true} />
+
+- <div>
+-   First
+- </div>
++ Array [
++   <div>
++     First
++   </div>,
++   <div>
++     Second
++   </div>,
++ ]"
+`;

__tests__/snapshotDiff.test.js

@@ -1,5 +1,7 @@
 // @flow
 
+/* eslint-disable react/no-multi-comp */
+
 const React = require('react');
 const snapshotDiff = require('../src/index');
 
@@ -87,7 +89,13 @@ class Component extends React.Component<Props> {
         <span />
         <span />
         <span />
-        <span>{this.props.test}</span>
+        <span
+          onBlur={() => {}}
+          onClick={jest.fn()}
+          onFocus={jest.fn().mockName('test-mock-name')}
+        >
+          {this.props.test}
+        </span>
         <span>{this.props.test}</span>
         <span />
         <span />
@@ -159,6 +167,17 @@ class Component extends React.Component<Props> {
   }
 }
 
+class FragmentComponent extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <div>First</div>
+        {this.props.withSecond ? <div>Second</div> : null}
+      </>
+    );
+  }
+}
+
 test('collapses diffs and strips ansi by default', () => {
   expect(snapshotDiff(a, b)).toMatchSnapshot();
 });
@@ -199,6 +218,12 @@ test('can use contextLines with React components', () => {
   ).toMatchSnapshot();
 });
 
+test('shows diff when comparing React fragments of varying length', () => {
+  expect(
+    snapshotDiff(<FragmentComponent />, <FragmentComponent withSecond />)
+  ).toMatchSnapshot();
+});
+
 test('can use stablePatchmarks on diff', () => {
   expect(
     snapshotDiff(noIndentA, noIndentB, { stablePatchmarks: true })

src/react-serializer.js

@@ -3,6 +3,9 @@
 'use strict';
 
 const prettyFormat = require('pretty-format');
+const snapshot = require('jest-snapshot');
+
+const serializers = snapshot.getSerializers();
 
 const { ReactElement } = prettyFormat.plugins;
 const reactElement = Symbol.for('react.element');
@@ -22,7 +25,8 @@ function getReactComponentSerializer() {
     }
     throw error;
   }
-  return value => renderer.create(value).toJSON();
+  return value =>
+    prettyFormat(renderer.create(value), { plugins: serializers });
 }
 
 const reactSerializer = {