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

* Output jest mock function names in snapshot diff

Use same serializers as jest-snapshot when serializing react components
rendered by react-test-renderer.

Fixes #106

* Add test to show output for React fragments

With the React serializer updated to use `prettyFormat`, this now
supports diffing React fragments when comparing a single element to
multiple elements returned. Adding test to confirm output.

Fixes #111

* Use jest-snapshot serializers for diff annotations

Makes use of the same serializers used for printing, in the react
serializer diff options which set up the A and B diff annotations.

Author: alistairjcbrown

__tests__/__snapshots__/snapshotDiff.test.js.snap

@@ -50,16 +50,16 @@ exports[`can use contextLines on diff 1`] = `
 
 exports[`can use contextLines with React components 1`] = `
 "Snapshot Diff:
-- <Component test=\\"say\\" />
-+ <Component test=\\"my name\\" />
+- <Component namedJestMock={[MockFunction test-mock-name]} test=\\"say\\" unnamedFunction={[Function unnamedFunction]} unnamedJestMock={[MockFunction]} />
++ <Component namedJestMock={[MockFunction test-mock-name]} test=\\"my name\\" unnamedFunction={[Function unnamedFunction]} unnamedJestMock={[MockFunction]} />
 
-@@ -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"
 `;
@@ -115,15 +115,15 @@ exports[`collapses diffs and strips ansi by default 1`] = `
 
 exports[`detects React components 1`] = `
 "Snapshot Diff:
-- <Component test=\\"say\\" />
-+ <Component test=\\"my name\\" />
-
-@@ -1,14 +1,14 @@
-  <div>
-    <span />
-    <span />
-    <span />
-    <span>
+- <Component namedJestMock={[MockFunction test-mock-name]} test=\\"say\\" unnamedFunction={[Function unnamedFunction]} unnamedJestMock={[MockFunction]} />
++ <Component namedJestMock={[MockFunction test-mock-name]} test=\\"my name\\" unnamedFunction={[Function unnamedFunction]} unnamedJestMock={[MockFunction]} />
+
+@@ -5,14 +5,14 @@
+    <span
+      onBlur={[Function unnamedFunction]}
+      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={this.props.unnamedFunction}
+          onClick={this.props.unnamedJestMock}
+          onFocus={this.props.namedJestMock}
+        >
+          {this.props.test}
+        </span>
         <span>{this.props.test}</span>
         <span />
         <span />
@@ -159,6 +167,23 @@ class Component extends React.Component<Props> {
   }
 }
 
+class FragmentComponent extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <div>First</div>
+        {this.props.withSecond ? <div>Second</div> : null}
+      </>
+    );
+  }
+}
+
+const props = {
+  unnamedFunction: () => {},
+  unnamedJestMock: jest.fn(),
+  namedJestMock: jest.fn().mockName('test-mock-name'),
+};
+
 test('collapses diffs and strips ansi by default', () => {
   expect(snapshotDiff(a, b)).toMatchSnapshot();
 });
@@ -187,15 +212,28 @@ test('diffs short strings', () => {
 
 test('detects React components', () => {
   expect(
-    snapshotDiff(<Component test="say" />, <Component test="my name" />)
+    snapshotDiff(
+      <Component {...props} test="say" />,
+      <Component {...props} test="my name" />
+    )
   ).toMatchSnapshot();
 });
 
 test('can use contextLines with React components', () => {
   expect(
-    snapshotDiff(<Component test="say" />, <Component test="my name" />, {
-      contextLines: 0,
-    })
+    snapshotDiff(
+      <Component {...props} test="say" />,
+      <Component {...props} test="my name" />,
+      {
+        contextLines: 0,
+      }
+    )
+  ).toMatchSnapshot();
+});
+
+test('shows diff when comparing React fragments of varying length', () => {
+  expect(
+    snapshotDiff(<FragmentComponent />, <FragmentComponent withSecond />)
   ).toMatchSnapshot();
 });
 

src/react-serializer.js

@@ -3,8 +3,10 @@
 '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');
 
 function getReactComponentSerializer() {
@@ -22,7 +24,8 @@ function getReactComponentSerializer() {
     }
     throw error;
   }
-  return value => renderer.create(value).toJSON();
+  return value =>
+    prettyFormat(renderer.create(value), { plugins: serializers });
 }
 
 const reactSerializer = {
@@ -32,7 +35,7 @@ const reactSerializer = {
     return reactComponentSerializer(value);
   },
   diffOptions: (valueA: any, valueB: any) => {
-    const prettyFormatOptions = { plugins: [ReactElement], min: true };
+    const prettyFormatOptions = { plugins: serializers, min: true };
     return {
       aAnnotation: prettyFormat(valueA, prettyFormatOptions),
       bAnnotation: prettyFormat(valueB, prettyFormatOptions),