diff --git a/packages/pretty-format/src/__tests__/react.test.js b/packages/pretty-format/src/__tests__/react.test.js
index fa65de01e10c..3a5b3a40e9a8 100644
--- a/packages/pretty-format/src/__tests__/react.test.js
+++ b/packages/pretty-format/src/__tests__/react.test.js
@@ -443,6 +443,119 @@ describe('indent option', () => {
});
});
+describe('maxDepth option', () => {
+ test('elements', () => {
+ const maxDepth = 2;
+ const val = React.createElement(
+ // ++depth === 1
+ 'dl',
+ null,
+ React.createElement('dt', {id: 'jest'}, 'jest'), // ++depth === 2
+ React.createElement(
+ // ++depth === 2
+ 'dd',
+ {
+ id: 'jest-1',
+ },
+ 'to talk in a ',
+ React.createElement('em', null, 'playful'), // ++depth === 3
+ ' manner',
+ ),
+ React.createElement(
+ // ++ depth === 2
+ 'dd',
+ {
+ id: 'jest-2',
+ style: {
+ // ++depth === 3
+ color: '#99424F',
+ },
+ },
+ React.createElement('em', null, 'painless'), // ++depth === 3
+ ' JavaScript testing',
+ ),
+ );
+ const expected = [
+ '
',
+ ' - ',
+ ' jest',
+ '
',
+ ' - ',
+ ' to talk in a ',
+ ' ',
+ ' manner',
+ '
',
+ ' - ',
+ ' ',
+ ' JavaScript testing',
+ '
',
+ '
',
+ ].join('\n');
+ assertPrintedJSX(val, expected, {maxDepth});
+ });
+ test('array of elements', () => {
+ const maxDepth = 2;
+ const array = [
+ // ++depth === 1
+ React.createElement(
+ // ++depth === 2
+ 'dd',
+ {
+ id: 'jest-1',
+ },
+ 'to talk in a ',
+ React.createElement('em', null, 'playful'), // ++depth === 3
+ ' manner',
+ ),
+ React.createElement(
+ // ++ depth === 2
+ 'dd',
+ {
+ id: 'jest-2',
+ style: {
+ // ++depth === 3
+ color: '#99424F',
+ },
+ },
+ React.createElement('em', null, 'painless'), // ++depth === 3
+ ' JavaScript testing',
+ ),
+ ];
+ const expected = [
+ 'Array [',
+ ' ',
+ ' to talk in a ',
+ ' ',
+ ' manner',
+ ' ,',
+ ' ',
+ ' ',
+ ' JavaScript testing',
+ ' ,',
+ ']',
+ ].join('\n');
+ expect(formatElement(array, {maxDepth})).toEqual(expected);
+ expect(
+ formatTestObject(
+ array.map(element => renderer.create(element).toJSON()),
+ {maxDepth},
+ ),
+ ).toEqual(expected);
+ });
+});
+
test('min option', () => {
assertPrintedJSX(
React.createElement(
diff --git a/packages/pretty-format/src/plugins/lib/markup.js b/packages/pretty-format/src/plugins/lib/markup.js
index ac475805169a..845455eae22b 100644
--- a/packages/pretty-format/src/plugins/lib/markup.js
+++ b/packages/pretty-format/src/plugins/lib/markup.js
@@ -114,3 +114,17 @@ export const printElement = (
tagColor.close
);
};
+
+export const printElementAsLeaf = (type: string, config: Config) => {
+ const tagColor = config.colors.tag;
+ return (
+ tagColor.open +
+ '<' +
+ type +
+ tagColor.close +
+ ' …' +
+ tagColor.open +
+ ' />' +
+ tagColor.close
+ );
+};
diff --git a/packages/pretty-format/src/plugins/react_element.js b/packages/pretty-format/src/plugins/react_element.js
index b4c6749641a1..0f8bf77f0dd7 100644
--- a/packages/pretty-format/src/plugins/react_element.js
+++ b/packages/pretty-format/src/plugins/react_element.js
@@ -10,7 +10,12 @@
import type {Config, NewPlugin, Printer, Refs} from 'types/PrettyFormat';
-import {printChildren, printElement, printProps} from './lib/markup';
+import {
+ printChildren,
+ printElement,
+ printElementAsLeaf,
+ printProps,
+} from './lib/markup';
const elementSymbol = Symbol.for('react.element');
@@ -45,28 +50,30 @@ export const serialize = (
refs: Refs,
printer: Printer,
): string =>
- printElement(
- getType(element),
- printProps(
- Object.keys(element.props).filter(key => key !== 'children').sort(),
- element.props,
- config,
- indentation + config.indent,
- depth,
- refs,
- printer,
- ),
- printChildren(
- getChildren(element.props.children),
- config,
- indentation + config.indent,
- depth,
- refs,
- printer,
- ),
- config,
- indentation,
- );
+ ++depth > config.maxDepth
+ ? printElementAsLeaf(getType(element), config)
+ : printElement(
+ getType(element),
+ printProps(
+ Object.keys(element.props).filter(key => key !== 'children').sort(),
+ element.props,
+ config,
+ indentation + config.indent,
+ depth,
+ refs,
+ printer,
+ ),
+ printChildren(
+ getChildren(element.props.children),
+ config,
+ indentation + config.indent,
+ depth,
+ refs,
+ printer,
+ ),
+ config,
+ indentation,
+ );
export const test = (val: any) => val && val.$$typeof === elementSymbol;
diff --git a/packages/pretty-format/src/plugins/react_test_component.js b/packages/pretty-format/src/plugins/react_test_component.js
index 3393c6a321ca..b0a42cb6b7d8 100644
--- a/packages/pretty-format/src/plugins/react_test_component.js
+++ b/packages/pretty-format/src/plugins/react_test_component.js
@@ -16,7 +16,12 @@ import type {
Refs,
} from 'types/PrettyFormat';
-import {printChildren, printElement, printProps} from './lib/markup';
+import {
+ printChildren,
+ printElement,
+ printElementAsLeaf,
+ printProps,
+} from './lib/markup';
const testSymbol = Symbol.for('react.test.json');
@@ -28,35 +33,37 @@ export const serialize = (
refs: Refs,
printer: Printer,
): string =>
- printElement(
- object.type,
- object.props
- ? printProps(
- Object.keys(object.props).sort(),
- // Despite ternary expression, Flow 0.51.0 found incorrect error:
- // undefined is incompatible with the expected param type of Object
- // $FlowFixMe
- object.props,
- config,
- indentation + config.indent,
- depth,
- refs,
- printer,
- )
- : '',
- object.children
- ? printChildren(
- object.children,
- config,
- indentation + config.indent,
- depth,
- refs,
- printer,
- )
- : '',
- config,
- indentation,
- );
+ ++depth > config.maxDepth
+ ? printElementAsLeaf(object.type, config)
+ : printElement(
+ object.type,
+ object.props
+ ? printProps(
+ Object.keys(object.props).sort(),
+ // Despite ternary expression, Flow 0.51.0 found incorrect error:
+ // undefined is incompatible with the expected param type of Object
+ // $FlowFixMe
+ object.props,
+ config,
+ indentation + config.indent,
+ depth,
+ refs,
+ printer,
+ )
+ : '',
+ object.children
+ ? printChildren(
+ object.children,
+ config,
+ indentation + config.indent,
+ depth,
+ refs,
+ printer,
+ )
+ : '',
+ config,
+ indentation,
+ );
export const test = (val: any) => val && val.$$typeof === testSymbol;