Jest无法识别node_modules中的import语句问题求助

我是Node.js新手，在测试项目的src/Custom.tsx中导入@fluentui/azure-themes包：

import * as StyleConstants from '@fluentui/azure-themes/lib/azure/Constants'; 

执行npm run test时抛出错误：

SyntaxError: Cannot use import statement outside a module

注释掉该导入，把Constants.js复制到根目录并修改导入路径后，测试能正常运行：

//import * as StyleConstants from '@fluentui/azure-themes/lib/azure/Constants';
import * as StyleConstants from '../Constants'

推测是Jest无法转换node_modules下的文件，已经在jest.config.js中配置transformIgnorePatterns排除@fluentui，但问题依旧。

相关配置文件 #

jest.config.js #

module.exports = {
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    transformIgnorePatterns: [
        "/node_modules/(?!@fluentui)/"
    ],
    moduleNameMapper: {
        // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
        "uuid": require.resolve('uuid'),
    },
};

tsconfig.json #

{
    "compilerOptions": {
      "jsx": "react",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true
    }
}

package.json #

{
    "name": "importing-testing",
    "version": "1.0.0",
    "description": "This branch contains code",
    "main": "index.js",
    "private": true,
    "scripts": {
        "start": "webpack-dev-server .",
        "build": "webpack .",
        "test": "jest App",
        "coverage": "jest --coverage",
        "lint": "eslint . --fix --max-warnings=0",
        "format": "prettier . --write"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "homepage": "",
    "devDependencies": {
        "@babel/cli": "^7.17.10",
        "@babel/core": "^7.17.10",
        "@babel/preset-env": "^7.17.10",
        "@babel/preset-react": "^7.16.7",
        "@babel/preset-typescript": "^7.24.1",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.2.0",
        "babel-loader": "^8.2.5",
        "eslint": "^8.15.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jest": "^26.2.2",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-react": "^7.29.4",
        "eslint-plugin-react-hooks": "^4.5.0",
        "html-webpack-plugin": "^5.5.0",
        "jest": "^28.1.3",
        "jest-environment-jsdom": "^28.1.0",
        "lint-staged": "^12.4.1",
        "prettier": "2.6.2",
        "webpack-dev-server": "^4.9.0"
    },
    "dependencies": {
        "@fluentui/azure-themes": "8.6.34",
        "@types/jest": "^29.5.12",
        "@types/node": "^20.12.11",
        "@types/react": "^18.3.1",
        "@types/react-dom": "^18.3.0",
        "babel-jest": "^29.7.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "ts-jest": "^29.1.2",
        "typescript": "^5.4.5"
    },
    "lint-staged": {
        "*.js": "npm run lint",
        "*.{js,css,md,html,json}": "npm run format"
    }
}

解决建议 #

1. 统一Jest相关依赖版本
   当前Jest用的是28.x版本，但babel-jest、ts-jest是29.x，版本不匹配会导致转换逻辑失效。要么把Jest升级到29.x，要么把babel-jest、ts-jest降级到28.x。

2. 补充Jest的transform规则
   在jest.config.js中明确指定转换工具，同时细化transformIgnorePatterns确保@fluentui的子包能被处理：

   module.exports = {
       // ...原有配置
       transform: {
           '^.+\\.(ts|tsx)$': 'ts-jest',
           '^.+\\.(js|jsx)$': 'babel-jest',
       },
       transformIgnorePatterns: [
           "/node_modules/(?!@fluentui/azure-themes|@fluentui/react)/"
       ],
   };
   

3. 完善Babel配置
   确保项目根目录有babel.config.js，包含必要的预设：

   {
       "presets": [
           "@babel/preset-env",
           "@babel/preset-react",
           "@babel/preset-typescript"
       ]
   }
   

4. 调整导入方式
   避免直接导入包内的深层文件，改用官方推荐的入口导入：

   import { azureTheme } from '@fluentui/azure-themes';
   // 从azureTheme中提取所需常量
   

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