Remove undefined props when pretty-format'ing React elements

[brunotavares]

Summary

React plugins for pretty-format should not output undefined props.

This matches the behavior of React itself and makes Jest Snapshot tests accurate with the real component representation.

Given the following component:

const Link = (props) => <a href="/" target={props.newTab && '_blank'}>link!</a>;

Before:

Input	React	Pretty Format
<Link />	<a href="/">link!</a>	<a href="/" target={undefined}>link!</a>

After:

Input	React	Pretty Format
<Link />	<a href="/">link!</a>	<a href="/">link!</a>

Test plan

New unit tests in pretty-format to match expectations. These new tests were failing before the fix:

[SimenB]

This changed a snapshot of an integration test, mind updating it?

./jest -u integration-tests/__tests__/transform.test.js should do the trick 🙂

EDIT: Hah, wait, it needs to be cd integration-tests/transform/multiple-transformers; ../../../jest -u

[brunotavares]

Related issue: facebook/react/issues/10573

[codecov-io]

Codecov Report

Merging #6162 into master will increase coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #6162      +/-   ##
==========================================
+ Coverage   64.19%   64.22%   +0.02%     
==========================================
  Files         219      219              
  Lines        8423     8430       +7     
  Branches        4        4              
==========================================
+ Hits         5407     5414       +7     
  Misses       3015     3015              
  Partials        1        1

Impacted Files	Coverage Δ
...ackages/pretty-format/src/plugins/react_element.js	100% <100%> (ø)	⬆️
.../pretty-format/src/plugins/react_test_component.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e8cfaa5...afebdb4. Read the comment docs.

[SimenB]

I like it

[brunotavares]

Should this also affect ReactElement plugin, or just ReactTestComponent? I was testing a few more scenarios, and you need to pass an explicit prop={undefined} for ReactElement to print it.

Placing these examples side-to-side makes me think we should only fix ReactTestRenderer, but keep ReactElement intact.

Given:

const Viewport = (props) => <div id={props.id} />
const App = () => <Viewport />
const app = <App />
const viewport = <Viewport id={undefined} />

Input	React	Pretty & ReactElement	Pretty & ReactTestComponent
<App />	<div></div>	<App />	<div id={undefined} />
<Viewport id={undefined} />	<div></div>	<Viewport id={undefined} />	<div id={undefined} />

ReactTestComponent plugin is doing the wrong thing here (already fixed in this PR). Undefined props should be filtered.

Now, if we look at the input, and what ReactElement plugin is doing, it seems like the right thing to output the undefined props, since they were explicitly informed in the first place.

Here's a Gist.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.