hobgoblin: .html() output for <hr/> differs for shallow() vs. render()

[tshinnic]

Testing a minor component that renders only <div><hr /></div>. I was attempting to evaluate testing with outputs from shallow() vs. render() when I found differences in the results from .html().

The shallow renderer's shallowWrapper.html() returns <div><hr/></div>

The static renderer's renderWrapper.html() returns <div><hr></div>

Is static rendering with cheerio causing the strange "how do we represent self-closing elements" differences?

Is there a mention in the docs that nothing is guaranteed about outputs from .html() and .text()?

Is there a stated/doced bias for which renderer to prefer?

Should I tell my consistency hobgoblin to go join the troll under the nearest bridge?

[lelandrichardson]

This is a strange difference. I suspect that shallow's .html() method will more directly represent reality, since that's just using React.renderToStaticMarkup internally. The renderWrapper on the other hand is taking the result of renderToStaticMarkup, parsing it, then outputting a new "manufactured" string (is my guess, at least).

[dmnkgrc]

Has anybody given it a try? Maybe I could try it

[pnkapadia6]

Actually, render() and mount() both return <div><hr></div>.
Since tags like hr and br are empty tags, are we supposed to fix the shallow() method?
Can I take a look, @dmnkgrc?

[kutyel]

Can I give this a go? What should we fix first? Can anyone give me some insight on the problem? Thanks in advance!

[ljharb]

I think the shallow renderer output more closely matches what people type in jsx - so i'd hope that all three would be able to use XHTML syntax.

[lucmerceron]

Hello guys

I would love to help on this one. I was thinking of two solutions:

• Regex the outerHTML return with the list of self closing tags to modify the result with />
• Use or create an equivalent of [XMLSerializer serializeToString](https://developer.mozilla.org/fr/docs/XMLSerializer method) to use in html() function.

[dreadwail]

I did some investigation on this and here's what I found:

The code path that is followed from ReactWrapper's html() function leads to effectively this to generate the content:

const domNode = ReactDOM.findDOMNode(node.instance);
return domNode.outerHTML;

(There is more than that but I am simplifying for explanation)

So the issue can actually be observed directly over in React (nothing to do with Enzyme). And I believe the reason React renders in this fashion is because a <hr> tag is a "void element", which according to the spec does not require closing nor self-closing:

http://w3c.github.io/html/syntax.html#void-elements

So this may be an intentional thing from React's perspective.

@ljharb If my assessment above is accurate, I have questions around what you would expect to see here:

1. Would you still want Enzyme to return self-closing tags in this scenario?
2. Should it apply to all tags regardless of what kind they are? (void element, non-void element, etc)

[ljharb]

@benlakey i think it would be reasonable for enzyme to normalize self-closing tags, and I also think it would be reasonable to leave it as-is.