search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.96k stars 2.01k forks source link

Spike: Evaluate options for testing library injected DOM #535

Open blainekasten opened 8 years ago

blainekasten commented 8 years ago

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 commented 8 years ago

ref: #527

ljharb commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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)