This is an example React application clone from codesandbox.io and blog post How To Build a React To-Do App with React Hooks.
Because the application is using react-scripts
, we can point our Cypress Webpack preprocessor at the Webpack config included with react-scripts
module. See cypress/plugins/index.js file.
Tip: you can use find-webpack utility to find the Webpack config options provided by common tools: react-scripts
, Vue CLI.
Normally, a code that uses dynamic imports is bundled by Webpack into a separate JavaScript bundle (chunk) to be loaded on demand. Cypress needs all chunks to be in the same bundled file, since it cannot be serving additional files, besides the spec itself. Thus we need to force all chunks into the single bundle by changing the Webpack plugins' options.
See cypress/integration/dynamic-import-spec.js and the cypress/plugins/index.js file - it uses find-webpack cleanForCypress utility to force dynamic imports into the same spec bundle.