I am trying to set up Cypress component tests with the following specs:
- Cypress 10
- CRA with ejected config
- TypeScript
- webpack 4
- webpack-dev-server 3
- Running in Drone CI
I've taken two different paths with different levels of success, but I'm not 100% satisfied with either of them and would like some help with it!
1. Using webpackDevServer.config.js successfully, but when running inside Drone CI, file watchers hits limit
I thought this theoretically shouldn't work because I didn't pass any webpack config in, but I imagine Cypress already has this covered with the webpack-preprocessor, am I correct?
This path is the most successful one I've had so far where everything runs fine and successfully, even in the CI. The only downside is that Cypress doesn't seem to recognise the watchContentBase: false option that I pass into my devServer to disable file watching. I want file watching disabled because this test is running in the CI and I won't make any changes to the code so I won't need watching/live reloading/HMR. My Drone CI also keeps throwing thousands of these errors (even though the build step runs successfully) which I would like to get rid of:
Error from chokidar (/path/to/module): Error: ENOSPC: System limit for number of file watchers reached, watch '/path/to/module'
Here's an abridged version of my Cypress config:
import webpackDevServerConfig from './config/webpackDevServer.config';
const isRunningInCI = process.env.CI === 'true';
export default defineConfig({
component: {
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
webpackConfig: {
devServer: {
...webpackDevServerConfig,
// Disable hot reloading server/file watching if running in CI
watchContentBase: !isRunningInCI
}
}
}
}
});
In webpack-dev-server, watchContentBase is the option I want disabled so that my files aren't watched. I know my options above will be passed to webpack dev server via this line, but the chokidar errors aren't going away. Am I missing something here?
2. Use webpack.config.js and webpackDevServer.config.js, but running into SassError
I used the entire webpack.config.js and webpackDevServer.config.js as set up in scripts/start.js (after ejecting my CRA) and passed that into webpackConfig, but ended up getting SassErrors like so:
ERROR in ./src/components/button-row/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--7-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-6-4!./src/components/button-row/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of src/components/button-row/styles.scss
>> var api = require("!../../../node_modules/style-loader/dist/runtime/injectSt
Line 1 of src/components/button-row/styles.scss is:
@import '~src/styles/variables';
I'm not too familiar with Webpack so I'm not sure why this error is happening. :(
The actual test for 1 runs successfully–my component mounts, works and is styled perfectly too so I'm more inclined to continue on that path but I'm not sure if I'm doing it right. Would appreciate any help please!
