cypress
cypress copied to clipboard
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
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.
@ZachJW34 would there still be a solution to load global styles / js polyfills ?
@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
The code for this is done in cypress-io/cypress#23299, but has yet to be released. We'll update this issue and reference the changelog when it's released.
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.