Support maxDepth option in React plugins (#4208)

jestjs · Aug 7, 2017 · 3601d3a · 3601d3a
1 parent 3f6422d
commit 3601d3a
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 53 deletions.
diff --git 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 = [
+      '<dl>',
+      '  <dt',
+      '    id="jest"',
+      '  >',
+      '    jest',
+      '  </dt>',
+      '  <dd',
+      '    id="jest-1"',
+      '  >',
+      '    to talk in a ',
+      '    <em … />',
+      '     manner',
+      '  </dd>',
+      '  <dd',
+      '    id="jest-2"',
+      '    style={[Object]}',
+      '  >',
+      '    <em … />',
+      '     JavaScript testing',
+      '  </dd>',
+      '</dl>',
+    ].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 [',
+      '  <dd',
+      '    id="jest-1"',
+      '  >',
+      '    to talk in a ',
+      '    <em … />',
+      '     manner',
+      '  </dd>,',
+      '  <dd',
+      '    id="jest-2"',
+      '    style={[Object]}',
+      '  >',
+      '    <em … />',
+      '     JavaScript testing',
+      '  </dd>,',
+      ']',
+    ].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
@@ -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
@@ -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
@@ -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;