support serializing DocumentFragment

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `[jest-runner]` print stack trace when `process.exit` is called from user code ([#6714](https://github.com/facebook/jest/pull/6714))
 - `[jest-each]` introduces `%#` option to add index of the test to its title ([#6414](https://github.com/facebook/jest/pull/6414))
+- `[pretty-format]` Support serializing `DocumentFragment` ([#6705](https://github.com/facebook/jest/pull/6705))
 
 ### Fixes
 

packages/pretty-format/src/__tests__/dom_element.test.js

@@ -308,6 +308,45 @@ Testing.`;
     );
   });
 
+  it('supports fragment node', () => {
+    const fragment = document.createDocumentFragment();
+    const browsers = [
+      'Firefox',
+      'Chrome',
+      'Opera',
+      'Safari',
+      'Internet Explorer',
+    ];
+
+    browsers.forEach(browser => {
+      const li = document.createElement('li');
+      li.textContent = browser;
+      fragment.appendChild(li);
+    });
+
+    expect(fragment).toPrettyPrintTo(
+      [
+        '<DocumentFragment>',
+        '  <li>',
+        '    Firefox',
+        '  </li>',
+        '  <li>',
+        '    Chrome',
+        '  </li>',
+        '  <li>',
+        '    Opera',
+        '  </li>',
+        '  <li>',
+        '    Safari',
+        '  </li>',
+        '  <li>',
+        '    Internet Explorer',
+        '  </li>',
+        '</DocumentFragment>',
+      ].join('\n'),
+    );
+  });
+
   describe('matches constructor name of SVG elements', () => {
     // Too bad, so sad, element.constructor.name of SVG elements
     // is HTMLUnknownElement in jsdom v9 and v10

packages/pretty-format/src/plugins/dom_element.js

@@ -37,17 +37,23 @@ type Comment = {
   data: string,
   nodeType: 8,
 };
+type DocumentFragment = {
+  children: Array<Element>,
+  nodeType: 11,
+};
 
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
 const COMMENT_NODE = 8;
+const FRAGMENT_NODE = 11;
 
 const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/;
 
 const testNode = (nodeType: any, name: any) =>
   (nodeType === ELEMENT_NODE && ELEMENT_REGEXP.test(name)) ||
   (nodeType === TEXT_NODE && name === 'Text') ||
-  (nodeType === COMMENT_NODE && name === 'Comment');
+  (nodeType === COMMENT_NODE && name === 'Comment') ||
+  (nodeType === FRAGMENT_NODE && name === 'DocumentFragment');
 
 export const test = (val: any) =>
   val &&
@@ -63,7 +69,7 @@ const propsReducer = (props, attribute) => {
 };
 
 export const serialize = (
-  node: Element | Text | Comment,
+  node: Element | Text | Comment | DocumentFragment,
   config: Config,
   indentation: string,
   depth: number,
@@ -78,24 +84,28 @@ export const serialize = (
     return printComment(node.data, config);
   }
 
-  const type = node.tagName.toLowerCase();
+  const type =
+    node.nodeType === FRAGMENT_NODE
+      ? `DocumentFragment`
+      : node.tagName.toLowerCase();
+
   if (++depth > config.maxDepth) {
     return printElementAsLeaf(type, config);
   }
 
   return printElement(
     type,
     printProps(
-      Array.prototype.map.call(node.attributes, keysMapper).sort(),
-      Array.prototype.reduce.call(node.attributes, propsReducer, {}),
+      Array.prototype.map.call(node.attributes || [], keysMapper).sort(),
+      Array.prototype.reduce.call(node.attributes || [], propsReducer, {}),
       config,
       indentation + config.indent,
       depth,
       refs,
       printer,
     ),
     printChildren(
-      Array.prototype.slice.call(node.childNodes),
+      Array.prototype.slice.call(node.childNodes || node.children),
       config,
       indentation + config.indent,
       depth,