react-test-renderer renders attributes with value of undefined

[msmichellegar]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

react-test-renderer appears to render attributes in a way that is inconsistent with React in the browser. When rendering with React, attributes with a value that is not truthy are omitted from the render. In react-test-renderer, an attribute with a value of undefined still renders.

If the current behaviour is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

With a component like this:

class Link extends React.Component {
  render() {
    return (
      <a href="/" target={this.props.newTab && '_blank'}>link!</a>
    );
  }
}

When rendering<Link newTab="true" />:

In React: <a href="/" target="_blank">link!</a>
In react-test-renderer: <a href="/" target="_blank">link!</a>

When rendering <Link />:

In React: <a href="/">link!</a>
In react-test-renderer: <a href="/" target={undefined}>link!</a>

What is the expected behavior?

I would expect react-test-renderer to have the same behaviour as React in the browser. So in this case, the undefined attribute would not be rendered at all.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Using version 15.6.1 of react-test-renderer and React, Chrome on a MacBook. Testing with Jest snapshots in version 19.0.2.

[aweary]

Hey, @msmichellegar! Thanks for the report. The test renderer doesn't actually dictate how the component is rendered; it just returns a representation of the component tree that other tools can consume, including falsy attributes, since some consumers might want to know if the attribute is present or not.

In this case, the component is being rendered by Jest, which uses the package pretty-format to format the snapshot results. I think it's expected that it renders undefined and other falsy primitives, but you could always refer to their issue tracker to verify. Hope that helps!