Merge pull request #1566 from facebook/jsx

Pretty-print React elements

Author: cpojer

packages/jest-diff/package.json

@@ -11,7 +11,7 @@
     "chalk": "^1.1.3",
     "diff": "^3.0.0",
     "jest-matcher-utils": "^15.0.1",
-    "pretty-format": "^3.6.0"
+    "pretty-format": "^3.7.0"
   },
   "scripts": {
     "test": "../../packages/jest-cli/bin/jest.js"

packages/jest-diff/src/__tests__/diff-test.js

@@ -101,3 +101,24 @@ test('booleans', () => {
   expect(result).toBe(null);
   expect(result).toBe(null);
 });
+
+test('React elements', () => {
+  const result = diff({
+    $$typeof: Symbol.for('react.element'),
+    type: 'div',
+    props: {
+      className: 'fun',
+      children: 'Hello',
+    },
+  }, {
+    $$typeof: Symbol.for('react.element'),
+    type: 'div',
+    className: 'fun',
+    props: {
+      children: 'Goodbye',
+    },
+  });
+  expect(stripAnsi(result)).toMatch(/<div[\s\S]+className="fun">/);
+  expect(stripAnsi(result)).toMatch(/\-\s+Hello/);
+  expect(stripAnsi(result)).toMatch(/\+\s+Goodbye/);
+});

packages/jest-diff/src/index.js

@@ -12,12 +12,15 @@
 
 import type {DiffOptions} from './diffStrings';
 
+const ReactElementPlugin = require('pretty-format/plugins/ReactElement');
+const ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent');
+
 const chalk = require('chalk');
 const diffStrings = require('./diffStrings');
 const {getType} = require('jest-matcher-utils');
-const jsxLikeExtension = require('pretty-format/plugins/ReactTestComponent');
 const prettyFormat = require('pretty-format');
 
+const jsxLikePlugins = [ReactTestComponentPlugin, ReactElementPlugin];
 const NO_DIFF_MESSAGE = require('./constants').NO_DIFF_MESSAGE;
 
 // Generate a string that will highlight the difference between two values
@@ -47,8 +50,8 @@ function diff(a: any, b: any, options: ?DiffOptions): ?string {
       return null;
     default:
       return diffStrings(
-        prettyFormat(a, {plugins: [jsxLikeExtension]}, options),
-        prettyFormat(b, {plugins: [jsxLikeExtension]}, options),
+        prettyFormat(a, {plugins: jsxLikePlugins}, options),
+        prettyFormat(b, {plugins: jsxLikePlugins}, options),
       );
   }
 }

packages/jest-snapshot/package.json

@@ -11,7 +11,7 @@
     "jest-diff": "^15.0.1",
     "jest-file-exists": "^15.0.0",
     "jest-util": "^15.0.1",
-    "pretty-format": "^3.6.0"
+    "pretty-format": "^3.7.0"
   },
   "scripts": {
     "test": "../jest-cli/bin/jest.js"

packages/jest-snapshot/src/SnapshotFile.js

@@ -9,13 +9,16 @@
  */
 'use strict';
 
+const ReactElementPlugin = require('pretty-format/plugins/ReactElement');
+const ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent');
+
 const createDirectory = require('jest-util').createDirectory;
 const fileExists = require('jest-file-exists');
 const fs = require('fs');
-const jsxLikeExtension = require('pretty-format/plugins/ReactTestComponent');
 const path = require('path');
 const prettyFormat = require('pretty-format');
 
+const jsxLikePlugins = [ReactElementPlugin, ReactTestComponentPlugin];
 const SNAPSHOT_EXTENSION = 'snap';
 
 import type {Path} from 'types/Config';
@@ -90,7 +93,7 @@ class SnapshotFile {
 
   serialize(data: any): string {
     return addExtraLineBreaks(prettyFormat(data, {
-      plugins: [jsxLikeExtension],
+      plugins: jsxLikePlugins,
     }));
   }