Spike: Evaluate options for testing library injected DOM

[blainekasten]

Working with external, non-react, libraries is a pain in the react ecosystem; testing is no exception. We should see if there is anything we can do, to normalize the DOM that gets injected by third party libraries.

React's TestUtils do not currently support this, so it'd be a huge win if enzyme could.

Highcharts is a decent test library.

[blainekasten]

ref: #527

[ljharb]

I'm not sure I understand - you're talking about something that's not React injecting DOM into a normally React-controlled DOM element? That seems fundamentally incompatible with the way React's supposed to work.

[blainekasten]

That's exactly what it is. I agree it's not in-line with React. But a lot of people are forced to use a third party library that manipulates the DOM in some sort. I'm not sure if this idea is something that's 1) possible, or 2) an idea we'd actually want to support as the code is likely hacky.

I just figured it was worth a spike as supporting it would be pretty big compared to other react testing libraries.

I think if we can't support it, or we don't want to, we should have a document on how to test those types of components, and what a tests goal should be.

[ljharb]

A document would be great regardless. I suspect it's not a pattern we wish to support, but there's no harm in investigating it.

[loudwinston]

I just ran into this issue using D3, definitely a frustrating experience. I ended up getting

Even if enzyme doesn't solve this issue, It'd be very useful to include some info about this issue in the documentation for the benefit of future developers. Mentioning some workarounds might also be useful, such as calling html() on the wrapper element (which does return the whole DOM tree, including what third-party libraries manipulated) and using cheerio or similar to do assertions (this is what I ended up doing)