如何让NextJS忽略babel.config.js，仅供Jest和Cypress测试使用？

方案1：拆分测试专用Babel配置文件 #

不在根目录放置babel.config.js，而是为Jest和Cypress分别创建独立的测试用Babel配置文件，再在各自的测试配置中指定使用该文件，让NextJS完全读取不到测试相关的Babel配置。

针对Jest #

1. 在项目根目录创建babel.config.test.js，写入测试所需的配置：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript' // 项目使用TS时添加
  ],
  plugins: [
    // 按需添加测试专用插件，比如@babel/plugin-transform-runtime等
  ]
};

2. 在jest.config.js中指定使用该测试配置文件：

module.exports = {
  // 其他Jest配置项
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './babel.config.test.js' }]
  }
};

针对Cypress #

1. 若使用Cypress 10+，在cypress.config.js中配置Babel：

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    // 其他E2E测试配置
    setupNodeEvents(on, config) {
      const babelOptions = require('./babel.config.test.js');
      on('file:preprocessor', require('@cypress/browserify-preprocessor')({
        babelOptions
      }));
    }
  },
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
    babelConfig: './babel.config.test.js' // 组件测试直接指定测试用Babel配置
  }
});

方案2：在根目录Babel配置中添加环境判断 #

如果必须保留根目录的babel.config.js，可以通过判断运行环境，仅在测试环境加载自定义配置，NextJS运行时自动跳过测试相关设置。

修改根目录babel.config.js如下：

module.exports = api => {
  // 缓存配置提升性能
  api.cache(() => process.env.NODE_ENV);
  
  const isTest = process.env.NODE_ENV === 'test';
  
  return {
    presets: [
      // 非测试环境加载NextJS默认Babel预设
      ...(!isTest ? ['next/babel'] : []),
      // 测试环境加载专用预设
      ...(isTest ? [
        '@babel/preset-env',
        '@babel/preset-react'
      ] : [])
    ],
    plugins: [
      // 测试环境启用专用插件
      ...(isTest ? ['@babel/plugin-transform-runtime'] : []),
      // 非测试环境加载NextJS所需插件
      ...(!isTest ? ['@babel/plugin-proposal-class-properties'] : [])
    ]
  };
};

当NextJS以development或production环境运行时，会加载next/babel预设，忽略测试配置；Jest/Cypress运行时（NODE_ENV=test）则会加载测试专用的Babel配置。

补充提示 #

如果已经在next.config.js中配置了babel选项，NextJS会优先使用该配置，自动忽略根目录的babel.config.js，也可以结合这个特性，将NextJS的Babel配置写在next.config.js中，测试用配置单独拆分。

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