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;