将 Jest@26 迁移到 Jest@27 时遇到问题

Question

我正在 尝试在 Next.js 13 项目中将 Jest 从版本 26 迁移到 27 ，但在更新到 Jest 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
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(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"
  }
}

请帮我解决这个问题！

Answer 1

对于我们的 next.js 应用程序来说，这就是解决方案：

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: ['@emotion/babel-plugin'],
};

并将其安装为开发依赖项：

npm install --save-dev @babel/preset-react