Remove undefined props when pretty-format'ing React elements

CHANGELOG.md

@@ -150,6 +150,8 @@
   configuration ([#5976](https://github.com/facebook/jest/pull/5976))
 * `[website]` Fix website docs
   ([#5853](https://github.com/facebook/jest/pull/5853))
+* `[pretty-format]` [**BREAKING**] Remove undefined props from React elements
+  ([#6162](https://github.com/facebook/jest/pull/6162))
 
 ### Chore & Maintenance
 

integration-tests/transform/multiple-transformers/__tests__/__snapshots__/multiple_transformers.test.js.snap

@@ -12,9 +12,7 @@ exports[`generates a snapshot with correctly transformed dependencies 1`] = `
       className="App-logo"
       src="logo.svg"
     />
-    <h2
-      className={undefined}
-    >
+    <h2>
       Welcome to React
     </h2>
   </div>

packages/pretty-format/src/__tests__/__snapshots__/react.test.js.snap

@@ -41,3 +41,9 @@ exports[`ReactTestComponent plugin highlights syntax with color from theme optio
   </>Hello, Mouse!</>
 <cyan></Mouse></>"
 `;
+
+exports[`ReactTestComponent removes undefined props 1`] = `
+"<cyan><Mouse</>
+  <yellow>xyz</>=<red>{true}</>
+<cyan>/></>"
+`;

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

@@ -752,3 +752,28 @@ test('supports context Consumer with a child', () => {
     ),
   ).toEqual('<Context.Consumer>\n  [Function anonymous]\n</Context.Consumer>');
 });
+
+test('ReactElement removes undefined props', () => {
+  assertPrintedJSX(
+    React.createElement('Mouse', {
+      abc: undefined,
+      xyz: true,
+    }),
+    '<Mouse\n  xyz={true}\n/>',
+  );
+});
+
+test('ReactTestComponent removes undefined props', () => {
+  const jsx = React.createElement('Mouse', {
+    abc: undefined,
+    xyz: true,
+  });
+  expect(
+    formatElement(jsx, {
+      highlight: true,
+      theme: {
+        value: 'red',
+      },
+    }),
+  ).toMatchSnapshot();
+});

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

@@ -66,6 +66,14 @@ const getType = element => {
   return 'UNDEFINED';
 };
 
+const getPropKeys = element => {
+  const {props} = element;
+
+  return Object.keys(props)
+    .filter(key => key !== 'children' && props[key] !== undefined)
+    .sort();
+};
+
 export const serialize = (
   element: React$Element<any>,
   config: Config,
@@ -79,9 +87,7 @@ export const serialize = (
     : printElement(
         getType(element),
         printProps(
-          Object.keys(element.props)
-            .filter(key => key !== 'children')
-            .sort(),
+          getPropKeys(element),
           element.props,
           config,
           indentation + config.indent,

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

@@ -24,6 +24,16 @@ import {
 
 const testSymbol = Symbol.for('react.test.json');
 
+const getPropKeys = object => {
+  const {props} = object;
+
+  return props
+    ? Object.keys(props)
+        .filter(key => props[key] !== undefined)
+        .sort()
+    : [];
+};
+
 export const serialize = (
   object: ReactTestObject,
   config: Config,
@@ -38,7 +48,7 @@ export const serialize = (
         object.type,
         object.props
           ? printProps(
-              Object.keys(object.props).sort(),
+              getPropKeys(object),
               // Despite ternary expression, Flow 0.51.0 found incorrect error:
               // undefined is incompatible with the expected param type of Object
               // $FlowFixMe