DianaSuvorova/e2e

Slightly different approach, what do you think?

Opened this issue · 2 comments

Great example. I was looking for something similar, but a bit less invasive. Also I would like to be able to test arbitrary React component without rendering the whole tree. Just like we usually do with Enzyme. jsdom is very handy in most cases, but I also rely on getBoundingClientRect, so out of luck there. I was thinking if there was a way to have a method similar to Enzymes mount (but asynchronous), which will launch headless Chrome (with Puppeteer on top) behind the scenes and return the same ReactWrapper object as mount does. What do you think?

@jayarjo , it is interesting approach. It is definitely possible technically. It would just require a wrapper around index.js to provide which particular component you would want to mount instead of App.

const el = Enzyme.mount(<App />, { attachTo: document.getElementById('root') });

Although I would imagine this would be quite costly on test runtime. Because each time you mount different component you would need to recompile the whole app and relaunch the browser.

I was thinking to compile only that specific component (and it's dependencies) and feed it somehow to the running browser instance via Puppeteer.