使用Remix Indie Stack运行Cypress测试遇Webpack编译错误求助

问题描述 #

基于Remix Indie Stack从零搭建项目，执行Cypress测试时，浏览器中出现Webpack编译错误，报错指向@testing-library/dom中的空值合并运算符（??）无法被解析。

完整错误信息 #

Error: Webpack Compilation Error
./node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js 429:27
Module parse failed: Unexpected token (429:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
|   if (element.labels !== undefined) {
>     return element.labels ?? [];
|   }
| 
 @ ./node_modules/@testing-library/cypress/dist/index.js 9:11-42
 @ ./node_modules/@testing-library/cypress/dist/add-commands.js
 @ ./node_modules/@testing-library/cypress/add-commands.js
 @ ./cypress/support/e2e.ts
    at handle (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:23)
    at finalCallback (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:257:39)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:306:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:304:22
    at Compiler.emitRecords (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:298:10
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

问题原因 #

Cypress 10.8.0自带的Webpack版本无法识别ES2020+语法（比如空值合并运算符??），而@testing-library/dom库使用了该语法，且默认配置下Cypress不会转译node_modules目录下的文件，导致编译失败。

解决方法 #

方法1：升级Cypress版本 #

较新版本的Cypress已更新内置Webpack及Babel配置，可直接支持新语法。执行以下命令升级：

npm install cypress@latest --save-dev
# 或使用yarn
yarn add cypress@latest --dev

方法2：配置Cypress的Webpack预处理器转译指定依赖 #

如果无法升级Cypress，可修改Cypress的Webpack配置，让Babel转译@testing-library相关依赖：

1. 安装必要依赖：

npm install @cypress/webpack-preprocessor babel-loader @babel/preset-env --save-dev

2. 在项目根目录创建cypress/webpack.config.js文件，内容如下：

const { devServer } = require('@cypress/webpack-dev-server');
const path = require('path');

module.exports = (on, config) => {
  on('dev-server:start', (options) => {
    return devServer({
      options,
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules(?!\/@testing-library)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env'],
                },
              },
            },
          ],
        },
      },
    });
  });

  return config;
};

3. 在cypress.config.ts中引入该配置：

import { defineConfig } from 'cypress';
import webpackConfig from './cypress/webpack.config';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return webpackConfig(on, config);
    },
  },
});

方法3：降级@testing-library/cypress版本 #

安装不使用ES2020+语法的旧版本：

npm install @testing-library/cypress@^8.0.0 --save-dev

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