Components testing - Webpack entry feature causes confusion

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]

@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

[cypress-bot[bot]]

Released in 10.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to Cypress v10.5.0, please open a new issue.