Cypress component tests still watching files because it's using the wrong WDS, invalidates WDS options

Current behavior

Hey Cypress, I’ve been trying to set up Cypress component tests in my codebase with the following specs:

• CRA with ejected config (so I can customise it)
• webpack 4
• webpack-dev-server 3
• Cypress 10
• Drone CI

Everything runs fine locally, but when I run it in Drone, Cypress seems to still be watching files even though I thought that was fixed here. I enabled logging and I realised several things:

1. It’s successfully sourcing for the right webpack-dev-server I have in my codebase, which is wds 3 (scroll to the end to see the majorVersion):

 cypress:webpack-dev-server:sourceRelativeWebpackModules WebpackDevServer: Successfully sourced webpack-dev-server - { importPath: '/drone/src/node_modules/webpack-dev-server', packageJson: { name: 'webpack-dev-server', version: '3.11.1', description: 'Serves a webpack app. Updates the browser on changes.', bin: 'bin/webpack-dev-server.js', main: 'lib/Server.js', files: [ 'bin', 'lib', 'ssl', 'client' ], engines: { node: '>= 6.11.5' }, scripts: { 'lint:prettier': 'prettier "{**/*,*}.{js,json,md,yml,css}" --list-different', 'lint:js': 'eslint . --cache', lint: 'npm-run-all -l -p "lint:**"', 'lint:type': 'tsc --noEmit', commitlint: 'commitlint --from=master', security: 'npm audit', 'test:only': 'jest --forceExit', 'test:coverage': 'npm run test:only -- --coverage', 'test:watch': 'npm run test:coverage --watch', test: 'npm run test:coverage', pretest: 'npm run lint', prepare: 'rimraf ./ssl/*.pem && npm run build:client', 'build:client:default': 'babel client-src/default --out-dir client --ignore "./client-src/default/*.config.js"', 'build:client:clients': 'babel client-src/clients --out-dir client/clients', 'build:client:index': 'webpack ./client-src/default/index.js -o client/index.bundle.js --color --config client-src/default/webpack.config.js', 'build:client:live': 'webpack ./client-src/live/index.js -o client/live.bundle.js --color --config client-src/live/webpack.config.js', 'build:client:sockjs': 'webpack ./client-src/sockjs/index.js -o client/sockjs.bundle.js --color --config client-src/sockjs/webpack.config.js', 'build:client': 'rimraf ./client/* && npm-run-all -s -l -p "build:client:**"', 'webpack-dev-server': 'node examples/run-example.js', release: 'standard-version' }, dependencies: { 'ansi-html': '0.0.7', bonjour: '^3.5.0', chokidar: '^2.1.8', compression: '^1.7.4', 'connect-history-api-fallback': '^1.6.0', debug: '^4.1.1', del: '^4.1.1', express: '^4.17.1', 'html-entities': '^1.3.1', 'http-proxy-middleware': '0.19.1', 'import-local': '^2.0.0', 'internal-ip': '^4.3.0', ip: '^1.1.5', 'is-absolute-url': '^3.0.3', killable: '^1.0.1', loglevel: '^1.6.8', opn: '^5.5.0', 'p-retry': '^3.0.1', portfinder: '^1.0.26', 'schema-utils': '^1.0.0', selfsigned: '^1.10.8', semver: '^6.3.0', 'serve-index': '^1.9.1', sockjs: '^0.3.21', 'sockjs-client': '^1.5.0', spdy: '^4.0.2', 'strip-ansi': '^3.0.1', 'supports-color': '^6.1.0', url: '^0.11.0', 'webpack-dev-middleware': '^3.7.2', 'webpack-log': '^2.0.0', ws: '^6.2.1', yargs: '^13.3.2' }, devDependencies: { '@babel/cli': '^7.8.4', '@babel/core': '^7.9.6', '@babel/plugin-transform-runtime': '^7.9.6', '@babel/preset-env': '^7.9.6', '@babel/runtime': '^7.9.6', '@commitlint/cli': '^8.3.5', '@commitlint/config-conventional': '^8.3.4', 'babel-loader': '^8.1.0', 'body-parser': '^1.19.0', 'commitlint-azure-pipelines-cli': '^1.0.3', 'copy-webpack-plugin': '^5.1.1', 'css-loader': '^2.1.1', eslint: '^6.8.0', 'eslint-config-prettier': '^6.11.0', 'eslint-config-webpack': '^1.2.5', 'eslint-plugin-import': '^2.20.2', execa: '^1.0.0', 'file-loader': '^5.1.0', 'html-loader': '^0.5.5', 'html-webpack-plugin': '^3.2.0', husky: '^4.2.5', jest: '^24.9.0', 'jest-junit': '^10.0.0', jquery: '^3.5.1', less: '^3.11.1', 'less-loader': '^5.0.0', 'lint-staged': '^10.2.2', marked: '^0.8.2', memfs: '^3.1.2', 'npm-run-all': '^4.1.5', prettier: '^1.19.1', puppeteer: '^1.20.0', rimraf: '^3.0.2', 'standard-version': '^8.0.0', 'style-loader': '^1.2.1', supertest: '^4.0.2', 'tcp-port-used': '^1.0.1', typescript: '^3.8.3', 'url-loader': '^3.0.0', webpack: '^4.43.0', 'webpack-cli': '^3.3.11' }, peerDependencies: { webpack: '^4.0.0 || ^5.0.0' }, peerDependenciesMeta: { 'webpack-cli': [Object] }, author: 'Tobias Koppers @sokra', bugs: 'https://github.com/webpack/webpack-dev-server/issues', homepage: 'https://github.com/webpack/webpack-dev-server#readme', repository: 'https://github.com/webpack/webpack-dev-server.git', license: 'MIT' }, module: [class Server] { addDevServerEntrypoints: [Function: addEntries] }, majorVersion: 3 } +96ms

1. It’s somehow using webpack-dev-server v4?

  cypress:webpack-dev-server:start using webpack-dev-server v4 +0ms

I thought somehow since it’s using WDS 4, then I’ll customise my WDS options to that version so that it can disable watching files properly.

In WDS 3, the option to disable file watching is watchContentBase, and likely liveReload:

https://github.com/webpack/webpack-dev-server/blob/7e70eeea457a6a154709bd6069c05855f12f7842/lib/Server.js#L573-L575

https://github.com/webpack/webpack-dev-server/blob/7e70eeea457a6a154709bd6069c05855f12f7842/lib/Server.js#L739-L741

In WDS 4, it’s watchFiles:

https://github.com/webpack/webpack-dev-server/blob/fa5e454d197fc6ce7441f6c28449e1d35c83cefc/lib/Server.js#L2073-L2082

When I added watchFiles to my Cypress devServer config, I get an error saying webpack Dev Server Invalid Options:

222 ValidationError: webpack Dev Server Invalid Options
223	
224	options should NOT have additional properties
225	
226	    at validateOptions (/drone/src/node_modules/schema-utils/src/validateOptions.js:32:11)
227	    at new Server (/drone/src/node_modules/webpack-dev-server/lib/Server.js:57:5)
228	    at webpackDevServer3 (/root/.cache/Cypress/10.2.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/createWebpackDevServer.js:44:20)

This is how my Cypress config currently looks like:

import webpackDevServerConfig from './config/webpackDevServer.config';

[...]
    component: {
        devServer: {
            framework: 'create-react-app',
            bundler: 'webpack',
            webpackConfig: {
                devServer: {
                    ...webpackDevServerConfig,
                    watchContentBase: false,
                    liveReload: false,
                    watchFiles: false,
                },
            }
        },
        specPattern: 'src/**/*.cy.tsx',
        supportFile: 'cypress/support/component.tsx'
    }
[...]

Desired behavior

I believe this is a bug in Cypress–either use the right WDS module specified in package.json, or use the right validation options for the WDS module it’s using.

Test code to reproduce

Unfort I can’t fork the repo to a public domain as it’s against my contract 😕 I can however set up a call with whoever is looking into it if that works?

Cypress Version

10.2.0

Other

No response

[marktnoonan]

We’ve created https://github.com/cypress-io/cypress/issues/22959 to track this in a more generic way, so I’ll close this issue. Thanks for the report and comments @majoravery @leschdom

[marktnoonan]

Thanks for the context. It seems like this can be routed to the team as a “Don’t watch files in CT run mode” ticket (which I agree… isn’t needed), just as a good practice, and potential perf/resource management improvement.