Printing String objects as strings instead of objects

[joeldenning]

This pull request updates the way that nodes are printed when being debugged.

Use case in question

// Sorta weird to provide a String object as a prop instead of a string, but React supports it.
<div className={new String('foo')} />

Previous behavior

Debugging the above node previously logged the following:

<div className={{...}} />

Proposed behavior

I propose it would make more sense to print props that are String objects as strings:

<div className="foo" />

Notes

Providing String objects for element props like className is something that is supported by the DOM, and thus supported by React.

• See this react fiddle for an example of String objects being accepted as the className prop in React.
• Run the following code in a browser console to see that this behavior is something supported by browsers themselves:

document.body.className = new String('foo');
document.body.className; // this will log "foo"

[ljharb]

It's absurd to ever use boxed primitives in JavaScript; but that said, enzyme should certainly handle it well even if people do bad things.

The console has superpowers; if we want to detect boxed strings, we have to have special-cased code for it.

However, another alternative is to use the object-inspect library for the "object" case, which already handles all boxed primitives, and might allow the Debug code to be greatly simplified.

[ljharb]

instanceof is never reliable, and should not be used.

If we want to detect boxed strings, we need to use the is-string library.

[ljharb]

String(x) is always strictly better than x.toString(), and inside a template literal, both are unnecessary for a non-Symbol - this can just be `"${prop}"`

[joeldenning]

@ljharb thanks for the feedback - just pushed some changes.

[ljharb]

LGTM pending one nit, and a rebase

[ljharb]

The else here isn’t necessary; the following return can be de-indented

[joeldenning]

👍 updated