Jest 配置错误：无法在 React 和 TypeScript 项目中的模块外部使用 Import 语句

Question

我在 React 和 TypeScript 项目中运行 Jest 时遇到问题。我遇到的错误与 ES 模块导入有关。

这是我得到的错误：

C:\projects\my-project\web\node_modules\swiper\react\swiper-react.js:13
    import { Swiper } from './swiper.js';
    SyntaxError: Cannot use import statement outside a module

**or**

C:\projects\my-project\web\node_modules\ssr-window\ssr-window.esm.js:148
    export { extend, getDocument, getWindow, ssrDocument, ssrWindow };
    ^^^^^^

    SyntaxError: Unexpected token 'export'

包.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "type": "commonjs",
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@tasoskakour/react-use-oauth2": "^2.0.1",
    "@types/node": "^12.19.12",
    "axios": "^0.21.0",
    "dayjs": "^1.9.7",
    "jwt-decode": "^3.1.2",
    "lib": "file:../lib",
    "react": "^18.2.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-range": "^1.8.14",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "react-spring": "^9.5.2",
    "react-toastify": "^10.0.5",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.1",
    "sass": "^1.30.0",
    "swiper": "^8.4.6",
    "typescript": "^4.3.5",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-transform-modules-commonjs": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@testing-library/dom": "^10.1.0",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.3.3",
    "@types/react-datepicker": "^4.4.2",
    "@types/react-dom": "^18.3.0",
    "@types/react-redux": "^7.1.24",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.31.0",
    "@typescript-eslint/parser": "^5.31.0",
    "babel-jest": "^29.7.0",
    "customize-cra": "^1.0.0",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-prettier": "^3.3.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transform-stub": "^2.0.0",
    "prettier": "^2.2.1",
    "react-app-rewired": "^2.1.8",
    "ts-jest": "^29.1.5",
    "ts-node": "^10.9.2"
  },
  "resolutions": {
    "@types/react": "^17.0.38"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "jest --verbose",
    "test2": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "preset": "ts-jest",
    "transform": {
      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!swiper|lib|swiper/react)"
    ],
    "testEnvironment": "jsdom",
    "clearMocks": true,
    "collectCoverage": true,
    "coverageDirectory": "coverage",
    "moduleNameMapper": {
      "^@reducers/(.*)$": "<rootDir>/src/redux/reducers/$1",
      "^@actions/(.*)$": "<rootDir>/src/redux/actions/$1",
      "^@selectors/(.*)$": "<rootDir>/src/redux/selectors/$1",
      "^@pages/(.*)$": "<rootDir>/src/pages/$1",
      "^@components/(.*)$": "<rootDir>/src/components/$1",
      "^@routes/(.*)$": "<rootDir>/src/routes/$1",
      "^@styles/(.*)$": "<rootDir>/src/_styles/$1",
      "^@content/(.*)$": "<rootDir>/src/_content/$1",
      "^@config/(.*)$": "<rootDir>/src/config/$1",
      "^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
      "^@constants/(.*)$": "<rootDir>/src/constants/$1",
      "^.+.(css|styl|less|sass|scss|png|jpg|jpeg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "module": "commonjs", // Ensure this is set to 'commonjs'
    "target": "ES2015",
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

.babelrc

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs"
    ],
    "env": {
      "test": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs"
        ]
      }
    }
  }
  

大多数错误与node_modules 中的库有关。我尝试在transformIgnorePatterns中添加模块，但它不起作用。搞乱了 tsconfig.json 和 .babelrc 配置，但仍然无法消除错误。

Answer 1

添加到

transformIgnorePatterns

应该可以，正如你所说。

我注意到您使用的是 Windows。编写与 Windows 兼容的

transformIgnorePatterns

比较棘手；您需要处理反斜杠（如在 Windows 上使用的）和正斜杠（为了任何 Mac 或 Linux 同事的利益，并且您的 CI 可能运行 Linux），并且在 JS 字符串中使用反斜杠时需要转义。要变换

swiper

和

my-other-dep

，您的

transformIgnorePatterns

应该看起来像这样。

  transformIgnorePatterns: [
    '[/\\\\]node_modules[/\\\\](?!swiper[/\\\\]|my-other-dep[/\\\\])',
  ],