From 0296476b0d9a2f5f5e977cddaea4409b44ec4944 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 1 Sep 2016 16:48:17 +0100 Subject: [PATCH 1/3] Pretty-print React elements Fixes #1429 Fixes #1509 --- packages/jest-diff/package.json | 2 +- packages/jest-diff/src/__tests__/diff-test.js | 21 +++++++++++++++++++ packages/jest-diff/src/index.js | 8 ++++--- packages/jest-snapshot/package.json | 2 +- packages/jest-snapshot/src/SnapshotFile.js | 6 ++++-- 5 files changed, 32 insertions(+), 7 deletions(-) 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..1d717d2f5b49 100644 --- a/packages/jest-diff/src/index.js +++ b/packages/jest-diff/src/index.js @@ -15,9 +15,11 @@ import type {DiffOptions} from './diffStrings'; 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 ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent'); +const ReactElementPlugin = require('pretty-format/plugins/ReactElement'); +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 +49,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..a75ad7dec31a 100644 --- a/packages/jest-snapshot/src/SnapshotFile.js +++ b/packages/jest-snapshot/src/SnapshotFile.js @@ -12,10 +12,12 @@ 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 ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent'); +const ReactElementPlugin = require('pretty-format/plugins/ReactElement'); +const jsxLikePlugins = [ReactTestComponentPlugin, ReactElementPlugin]; const SNAPSHOT_EXTENSION = 'snap'; import type {Path} from 'types/Config'; @@ -90,7 +92,7 @@ class SnapshotFile { serialize(data: any): string { return addExtraLineBreaks(prettyFormat(data, { - plugins: [jsxLikeExtension], + plugins: jsxLikePlugins, })); } From 221d40940e45673f6a59f69232901834b3c74623 Mon Sep 17 00:00:00 2001 From: Christoph Pojer Date: Thu, 1 Sep 2016 16:54:07 +0100 Subject: [PATCH 2/3] Update SnapshotFile.js --- packages/jest-snapshot/src/SnapshotFile.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/jest-snapshot/src/SnapshotFile.js b/packages/jest-snapshot/src/SnapshotFile.js index a75ad7dec31a..ec88de65498d 100644 --- a/packages/jest-snapshot/src/SnapshotFile.js +++ b/packages/jest-snapshot/src/SnapshotFile.js @@ -9,15 +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 path = require('path'); const prettyFormat = require('pretty-format'); -const ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent'); -const ReactElementPlugin = require('pretty-format/plugins/ReactElement'); -const jsxLikePlugins = [ReactTestComponentPlugin, ReactElementPlugin]; +const jsxLikePlugins = [ReactElementPlugin, ReactTestComponentPlugin]; const SNAPSHOT_EXTENSION = 'snap'; import type {Path} from 'types/Config'; From da75b024971b6b18ed3131b40759211a031affeb Mon Sep 17 00:00:00 2001 From: Christoph Pojer Date: Thu, 1 Sep 2016 16:54:36 +0100 Subject: [PATCH 3/3] Update index.js --- packages/jest-diff/src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/jest-diff/src/index.js b/packages/jest-diff/src/index.js index 1d717d2f5b49..c7455f29eddc 100644 --- a/packages/jest-diff/src/index.js +++ b/packages/jest-diff/src/index.js @@ -12,12 +12,13 @@ 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 prettyFormat = require('pretty-format'); -const ReactTestComponentPlugin = require('pretty-format/plugins/ReactTestComponent'); -const ReactElementPlugin = require('pretty-format/plugins/ReactElement'); const jsxLikePlugins = [ReactTestComponentPlugin, ReactElementPlugin]; const NO_DIFF_MESSAGE = require('./constants').NO_DIFF_MESSAGE;