React中Jest运行报错：需添加类私有方法Babel插件

执行npm run test时出现以下报错：

Class private methods are not enabled. Please add `@babel/plugin-proposal-private-methods` to your configuration.
      71 |       : this.#createParallelTestRun(tests, watcher);
      72 |   }
    > 73 |   async #createInBandTestRun(tests, watcher) {
         |   ^
      74 |     process.env.JEST_WORKER_ID = '1';
      75 |     const mutex = (0, _pLimit().default)(1);
      76 |     return tests.reduce(

当前babel.config.js配置 #

module.exports = {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-flow',
        ],
        plugins: [
          'babel-plugin-styled-components',
          '@babel/plugin-proposal-class-properties',
        ]
      }

当前jest.config.js配置 #

/* eslint-disable no-undef */
module.exports = {
  collectCoverage: true,
  // on node 14.x coverage provider v8 offers good speed and more or less good report
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
 
    // Handle CSS imports (without CSS modules)
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
 
    // Handle image imports
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': '<rootDir>/__mocks__/fileMock.js',
 
    // Handle module aliases
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '\\.(png|jpg|jpeg|gif|webp|svg)$',
  ],
}

解决方案 #

• 安装缺失的Babel插件
  执行命令安装@babel/plugin-proposal-private-methods：

  npm install --save-dev @babel/plugin-proposal-private-methods
  

• 更新babel.config.js配置
  在plugins数组中添加该插件：

  module.exports = {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-flow',
          ],
          plugins: [
            'babel-plugin-styled-components',
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-proposal-private-methods' // 添加这一行
          ]
        }
  

• 清除缓存并重新测试
  执行以下命令清除Jest和项目缓存，避免旧缓存干扰：

  npm run test -- --clearCache
  rm -rf node_modules/.cache
  npm run test
  

• 检查Jest的transform配置（可选）
  若上述步骤无效，确认next/babel预设能读取项目根目录的babel.config.js，或尝试将Babel配置直接写入jest的transform选项中，同时确保next/babel版本与Babel插件版本兼容。

内容的提问来源于stack exchange，提问作者Iván Meyer