Remove undefined props when pretty-format'ing React elements (#6162)

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