diff --git a/packages/jest-diff/package.json b/packages/jest-diff/package.json index 4e9884c84ce7..bdc169a4bf8b 100644 --- a/packages/jest-diff/package.json +++ b/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" diff --git a/packages/jest-diff/src/__tests__/diff-test.js b/packages/jest-diff/src/__tests__/diff-test.js index 8f5d219b2eb9..00c2f6a466ee 100644 --- a/packages/jest-diff/src/__tests__/diff-test.js +++ b/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(//); + expect(stripAnsi(result)).toMatch(/\-\s+Hello/); + expect(stripAnsi(result)).toMatch(/\+\s+Goodbye/); +}); diff --git a/packages/jest-diff/src/index.js b/packages/jest-diff/src/index.js index 4b492fda6071..c7455f29eddc 100644 --- a/packages/jest-diff/src/index.js +++ b/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), ); } } diff --git a/packages/jest-snapshot/package.json b/packages/jest-snapshot/package.json index 19e0aaf43a1f..ccc434212d7b 100644 --- a/packages/jest-snapshot/package.json +++ b/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" diff --git a/packages/jest-snapshot/src/SnapshotFile.js b/packages/jest-snapshot/src/SnapshotFile.js index 8113d2ea5f8f..ec88de65498d 100644 --- a/packages/jest-snapshot/src/SnapshotFile.js +++ b/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, })); }