294985f8b3
* fix: remove mountHook function for React * fix: remove `unmount` from @cypress/react exports * fix: remove `unmount` from the @cypress/react readme * fix: don't alias React components on mount * fix: remove `mountCallback` from Vue adapters * fix: remove style injection utility functions from `mount-utils` * fix: fix React tests * fix: fix more React tests * fix: fix more tests * fix: fix screenshot test styles * fix: update documentation around mount-utils styles; fix tests * fix: update Vue docs to use `props` key rather than `propsData` * fix: add test styles back in * update unmount test and export getContainerEl for back compat * better errors * docs * error for unmount * test for error * fix last test * adjust language to reflect removed methods * one last deprecation * fix error * wip - [skip ci] * use proxy to catch errors * deprecate alias * update tests * update on link * use on links properly * revert changes Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
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.
Chunks and dynamic imports
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.