Next.js 13项目Jest从26升级到27时遇插件冲突错误求助

将Next.js 13项目的Jest从26版本迁移到27版本后，运行测试时出现如下错误：

FAIL  src/__tests__/app.test.tsx
  ● Test suite failed to run

    Cannot combine importAssertions and importAttributes plugins.

      at validatePlugins (node_modules/@babel/parser/src/plugin-utils.ts:130:11)
      at getParser (node_modules/@babel/parser/src/index.ts:106:5)
      at parse (node_modules/@babel/parser/src/index.ts:32:22)
      at parser (node_modules/@babel/core/src/parser/index.ts:28:19)
          at parser.next (<anonymous>)
      at normalizeFile (node_modules/@babel/core/src/transformation/normalize-file.ts:51:24)
          at normalizeFile.next (<anonymous>)
      at run (node_modules/@babel/core/src/transformation/index.ts:38:36)
          at run.next (<anonymous>)
      at transform (node_modules/@babel/core/src/transform.ts:29:20)
          at transform.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at fn (node_modules/gensync/index.js:89:14)
      at stopHiding - secret - don't use this - v1 (node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:97:14)
      at transformSync (node_modules/@babel/core/src/transform.ts:66:52)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.683 s

升级Jest前测试可正常通过，问题与业务代码无关。相关配置文件如下：

jest.config.js #

module.exports = {
  collectCoverage: true,
  coverageProvider: 'babel',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
 
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
 
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
 
    '^@/components/(.*)$': '<rootDir>/components/$1',
 
    '@next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    'next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    'server-only': `<rootDir>/__mocks__/empty.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: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
}

babel.config.js #

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      'react-css-modules',
      {
        autoResolveMultipleImports: true,
        generateScopedName: '[name]__[local]__[hash:base64:5]',
        handleMissingStyleName: 'throw',
        webpackHotModuleReloading: true,
      },
    ],
  ],
};

package.json（相关依赖） #

{
  "dependencies": {
    "abortcontroller-polyfill": "^1.7.5",
    "babel-plugin-react-css-modules": "^5.2.6",
    "next": "13.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
    "@types/jest": "^29.5.12",
    "babel-loader": "^8.2.2",
    "css-loader": "^3.4.2",
    "jest": "27.0.0",
    "jest-environment-jsdom": "^29.7.0",
    "node-fetch": "^2.6.1",
    "nodemon": "^2.0.7",
    "webpack": "^5.75.0"
  }
}

解决方案 #

这个错误源于依赖版本不兼容：Jest 27与高版本Babel、不匹配的jsdom环境依赖冲突，同时老旧的babel-plugin-react-css-modules也会和next/babel预设产生插件冲突。

1. 统一Jest相关依赖版本 #

jest-environment-jsdom版本必须和Jest主版本一致，当前29.7.0和Jest 27不兼容，修改为^27.5.1。

2. 降级Babel版本适配Jest 27 #

@babel/core 7.22.0版本过高，和Jest 27的兼容性不好，降级到^7.18.0。

3. 调整测试库版本至兼容范围 #

@testing-library系列版本过高，和Jest 27不匹配，调整为：

• @testing-library/dom: ^8.20.0
• @testing-library/jest-dom: ^5.16.5
• @testing-library/react: ^12.1.5
• @types/jest: ^27.5.2

4. 升级或替换CSS Modules插件 #

babel-plugin-react-css-modules 5.2.6版本较老，建议升级到^5.2.7；或者直接使用Next.js自带的CSS Modules支持，移除该插件（Next.js默认支持CSS Modules，无需额外Babel插件）。

修改后的package.json依赖示例 #

{
  "dependencies": {
    "abortcontroller-polyfill": "^1.7.5",
    "babel-plugin-react-css-modules": "^5.2.7",
    "next": "13.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@testing-library/dom": "^8.20.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",
    "@types/jest": "^27.5.2",
    "babel-loader": "^8.3.0",
    "css-loader": "^6.7.3",
    "jest": "27.0.0",
    "jest-environment-jsdom": "^27.5.1",
    "node-fetch": "^2.6.1",
    "nodemon": "^2.0.7",
    "webpack": "^5.75.0"
  }
}

5. 执行依赖安装 #

修改后运行npm install或yarn install，然后重新执行测试。

如果问题依旧，可以暂时注释掉babel.config.js中的react-css-modules插件，确认测试是否能正常运行，再逐步排查插件冲突。

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