NX14.5.1+Cypress10.2.0组件测试遇Module Parse失败，如何配置Webpack？

你遇到的错误是因为Webpack未配置合适的loader处理测试文件中的JSX语法，当前babel-loader规则仅匹配.js文件，未覆盖Cypress测试文件的JSX解析需求。以下是需要补充和调整的配置：

1. 修正Babel Loader的匹配规则 #

修改自定义Webpack配置中babel-loader的test正则，使其包含JSX文件及Cypress测试文件（.cy.js），同时确保不排除cypress目录：

config.module.rules.push({
  // 匹配js、jsx、cy.js、cy.jsx格式的文件
  test: /\.(js|jsx|cy.js|cy.jsx)$/,
  // 仅排除node_modules目录，不排除cypress测试文件
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        // 开启自动runtime，无需手动引入React
        ['@babel/preset-react', { runtime: 'automatic' }]
      ]
    }
  }
})

2. 全局注入process变量（覆盖测试环境） #

原配置仅在开发环境添加DefinePlugin，但Cypress组件测试可能运行在非开发环境，需将其移到环境判断外，确保所有环境都能注入process变量：

// 移到开发环境判断外，确保测试环境也能访问process.env
config.plugins.push(new webpack.DefinePlugin(getClientEnvironment()))

if (config.mode === 'development' && ((_a = config['devServer']) === null || _a === void 0 ? void 0 : _a.hot)) {
  // 原react-refresh相关配置保持不变
  const babelLoader = config.module.rules.find((rule) => {
    var _a
    return (
      typeof rule !== 'string' &&
      ((_a = rule.loader) === null || _a === void 0 ? void 0 : _a.toString().includes('babel-loader'))
    )
  })
  if (babelLoader && typeof babelLoader !== 'string') {
    babelLoader.options['plugins'] = [
      ...(babelLoader.options['plugins'] || []),
      [
        require.resolve('react-refresh/babel'),
        {
          skipEnvCheck: true
        }
      ]
    ]
  }
  config.plugins.push(new ReactRefreshPlugin())
}

3. 检查cypress.config.ts的配置正确性 #

确保已正确导入自定义Webpack配置：

import { defineConfig } from 'cypress'
// 根据实际路径导入你的Webpack配置文件
const webpackConfig = require('./path/to/your/webpack.config.js')

export default defineConfig({
  component: { 
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: webpackConfig
    }
  }
})

配置说明 #

• 调整test正则后，Webpack会用babel-loader处理所有含JSX的测试文件，将JSX转译为浏览器可识别的JS代码
• 开启@babel/preset-react的runtime: 'automatic'后，无需在测试文件中手动引入React，cy.mount可正常工作
• 全局添加DefinePlugin后，测试环境也能访问process.env变量，解决最初的process未定义问题

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