From a4f863d3ac4feb59d4b4d84fba310092c8beda18 Mon Sep 17 00:00:00 2001
From: Bruno Tavares <brunotavaresb@gmail.com>
Date: Wed, 9 May 2018 16:50:26 -0700
Subject: [PATCH 1/3] Remove undefined props when pretty-format'ing React
 elements

---
 .../__snapshots__/react.test.js.snap          |  6 +++++
 .../pretty-format/src/__tests__/react.test.js | 25 +++++++++++++++++++
 .../src/plugins/react_element.js              | 12 ++++++---
 .../src/plugins/react_test_component.js       | 12 ++++++++-
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/pretty-format/src/__tests__/__snapshots__/react.test.js.snap b/packages/pretty-format/src/__tests__/__snapshots__/react.test.js.snap
index 043e12cbb652..f79589e66984 100644
--- a/packages/pretty-format/src/__tests__/__snapshots__/react.test.js.snap
+++ b/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>/></>"
+`;
diff --git a/packages/pretty-format/src/__tests__/react.test.js b/packages/pretty-format/src/__tests__/react.test.js
index f25d7b30187d..77ed951983e4 100644
--- a/packages/pretty-format/src/__tests__/react.test.js
+++ b/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();
+});
diff --git a/packages/pretty-format/src/plugins/react_element.js b/packages/pretty-format/src/plugins/react_element.js
index 78b73be8ae2e..f83b63361c7e 100644
--- a/packages/pretty-format/src/plugins/react_element.js
+++ b/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,
diff --git a/packages/pretty-format/src/plugins/react_test_component.js b/packages/pretty-format/src/plugins/react_test_component.js
index 6d880731bdbc..ca892cb9ae86 100644
--- a/packages/pretty-format/src/plugins/react_test_component.js
+++ b/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

From 76865924296bdbc31f44ca1ad79b45919bd2d30b Mon Sep 17 00:00:00 2001
From: Bruno Tavares <brunotavaresb@gmail.com>
Date: Wed, 9 May 2018 17:35:24 -0700
Subject: [PATCH 2/3] Update changelog.md with fix in PR #6162

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c7acc04eb1e..422ed378127b 100644
--- a/CHANGELOG.md
+++ b/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
 

From afebdb4ea28c0c1391f6b5aa2e7c0aa9014f8129 Mon Sep 17 00:00:00 2001
From: Bruno Tavares <brunotavaresb@gmail.com>
Date: Thu, 10 May 2018 10:30:32 -0700
Subject: [PATCH 3/3] Update snapshot in integration-test

---
 .../__snapshots__/multiple_transformers.test.js.snap          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/integration-tests/transform/multiple-transformers/__tests__/__snapshots__/multiple_transformers.test.js.snap b/integration-tests/transform/multiple-transformers/__tests__/__snapshots__/multiple_transformers.test.js.snap
index 610c80366e9a..e0da9a921a06 100644
--- a/integration-tests/transform/multiple-transformers/__tests__/__snapshots__/multiple_transformers.test.js.snap
+++ b/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>