Components testing - Webpack entry feature causes confusion

[gsouf]

Current behavior

when loading app's webpack config cypress will build the app using the entry configuration of webpack. Then the bundled JS is injected in cypress when loading a component.

The issue is that with many default webpack configs will create errors in this configuration because the bundle will be a JS file that tries to render the app in the html. For example ReactDom.render(<App/>, someElement);. That is not a desired behavior for cypress components testing.

Desired behavior

@ZachJW34 proposed:

I think there could be a configuration option that would make sense for this. I imagine most people who provide a custom webpack config would want their apps entrypoint pruned

---

I would add that I understand the need to give an opportunity to inject global styles and global js stuff globally but I think it should at the minimum be mentioned in the doc and in the getting started guide to make sure people don't spend a long time figuring out why it's not working

Test code to reproduce

Clone that repo: https://gitlab.com/souf/react-webpack-playground/-/blob/cypress-webpack-entry/webpack.config.js using branch cypress-webpack-entry.

Run yarn install then yarn cypress:open. Open the component testing for the component App. Observe the error in the console triggering because the app tries to render in cypress's frame without a match DOM element for the given id.

Cypress Version

10.4.0

Other

No response

[ZachJW34]

Thanks for posting @gsouf. I'm thinking we should revert the changes we made to entrypoint handling, as the change from 10.3.1 to 10.4.0 is breaking some users. We made the change for upcoming Angular support which requires entrypoints to be preserved, but it shouldn't have had these unintended consequences.

[gsouf]

@ZachJW34 would there still be a solution to load global styles / js polyfills ?

[ZachJW34]

@gsouf we normally recommend importing them into the support file. Some frameworks rely on some entrypoint being injected into the index.html, like a style tag but an equivalency would be to import '../../src/my-styles.css' in cypress/support/component.js