ejected配置CRA下Cypress10组件测试CI监听超限与Sass报错排查

初始判断验证 #

你的判断完全正确：当配置中指定framework: 'create-react-app'时，Cypress 内置的@cypress/webpack-dev-server会自动加载适配CRA的默认webpack编译规则、loader链与基础配置，因此即使你没有传入完整的webpack.config.js，编译、组件挂载、样式加载也能正常运行。

方案1 文件监听器报错根因与修复 #

核心问题：配置传参位置错误 #

你当前的配置把webpack-dev-server的相关参数嵌套在了webpackConfig.devServer字段下，Cypress 不会读取该位置的devServer配置——webpack编译配置和webpack-devServer服务配置在Cypress的devServer配置项中是平级关系，因此你设置的watchContentBase: false根本没有生效，chokidar依然按照默认规则监听所有文件，最终触发Docker环境默认的inotify监听数上限报错。

完整修复配置 #

CI环境下需要关闭所有和热重载、文件监听相关的配置项，不要只设置watchContentBase，修复后的配置如下：

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

const isRunningInCI = process.env.CI === 'true';

export default defineConfig({
    component: {
        devServer: {
            framework: 'create-react-app',
            bundler: 'webpack',
            // webpack编译相关配置放该层级，现有方案不需要额外传入webpackConfig即可正常运行
            // devServer服务配置与framework、bundler、webpackConfig平级，不要嵌套在webpackConfig内
            ...webpackDevServerConfig,
            // CI环境下全量关闭监听、热更新能力
            ...(isRunningInCI ? {
                hot: false, // 关闭HMR热模块替换
                liveReload: false, // 关闭文件变更触发的页面重载
                watchContentBase: false, // 关闭静态资源目录监听
                watchOptions: {
                    ignored: '**/*', // 忽略所有文件的变更监听
                }
            } : {})
        }
    }
});

兜底方案（配置修改后仍有零星报错时使用） #

Drone CI默认使用Docker运行步骤，基础镜像的inotify监听数默认值通常较低（默认为8192），可以在测试步骤执行前加一行系统参数调整命令，直接调大监听器上限：

sysctl -w fs.inotify.max_user_watches=524288

方案2 SassError 报错原因 #

该报错是loader链重复叠加导致的：
当你指定framework: 'create-react-app'时，Cypress已经自动注入了CRA所需的所有样式处理loader（包括css-loader、postcss-loader、resolve-url-loader、sass-loader、style-loader），你再把eject后完整的webpack.config.js传入webpackConfig字段，会导致同一份scss文件被两组重复的loader规则依次处理，style-loader输出的JS运行时代码（就是报错里的var api = require("...injectSt...")）被当成SCSS内容传入sass-loader解析，自然会报非法CSS语法错误。
如果要使用自定义webpack配置，不要全量传入eject后的完整配置，只需要在Cypress自动生成的CRA基础配置上，通过函数形式修改你需要调整的规则即可，避免loader重复。

内容的提问来源于stack exchange，提问作者Avery