diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa2b96e0404e..960996411d70 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/pretty-format/src/__tests__/dom_element.test.js b/packages/pretty-format/src/__tests__/dom_element.test.js
index 2e863e0fd715..9b06b105766c 100644
--- a/packages/pretty-format/src/__tests__/dom_element.test.js
+++ b/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(
+ [
+ '',
+ ' ',
+ ' Firefox',
+ ' ',
+ ' ',
+ ' Chrome',
+ ' ',
+ ' ',
+ ' Opera',
+ ' ',
+ ' ',
+ ' Safari',
+ ' ',
+ ' ',
+ ' Internet Explorer',
+ ' ',
+ '',
+ ].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
diff --git a/packages/pretty-format/src/plugins/dom_element.js b/packages/pretty-format/src/plugins/dom_element.js
index 8f2de09642ac..b09cbeb1d409 100644
--- a/packages/pretty-format/src/plugins/dom_element.js
+++ b/packages/pretty-format/src/plugins/dom_element.js
@@ -37,17 +37,23 @@ type Comment = {
data: string,
nodeType: 8,
};
+type DocumentFragment = {
+ children: Array,
+ 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,7 +84,11 @@ 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);
}
@@ -86,8 +96,8 @@ export const serialize = (
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,
@@ -95,7 +105,7 @@ export const serialize = (
printer,
),
printChildren(
- Array.prototype.slice.call(node.childNodes),
+ Array.prototype.slice.call(node.childNodes || node.children),
config,
indentation + config.indent,
depth,