Jest无法解析共享库ES模块语法导致测试失败求助

云上老周

2026-6-30

问题描述

我们的React应用可正常运行，但执行Jest测试时出现组件查找相关错误，具体报错信息如下：

FAIL  src/components/dataconnectivitynew/ConnectionName/connectionName.test.js
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

/Users/mng/Documents/ssnc/ds-ui-react/node_modules/@xxxx/ui-shared-library/dist/index.js:12
import require$$2, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
^^^^^^

SyntaxError: Cannot use import statement outside a module

   5 | import SQL from "../../../assets/images/sql-database.svg";
   6 | import NoSQL from "../../../assets/images/nosql-database.svg";
>  7 | import { Button } from "@xxxx/ui-shared-library";
     | ^
   8 | import { useNavigate } from "react-router-dom";
   9 | import { Header } from "../../../components/dataconnectivitynew/subcomponents/Header/Header";
  10 | import { ConnectionCard } from "../ConnectionCard/connectionCard";

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (src/pages/Connections/NewDataConnection/newDataConnection.js:7:1)
  at Object.<anonymous> (src/App.js:13:1)
  at Object.<anonymous> (src/testUtils.js:3:1)
  at Object.<anonymous> (src/components/dataconnectivitynew/ConnectionName/connectionName.test.js:2:1)

我们的共享库package.json配置如下：

{
  "name": "@xxxx/ui-shared-library",
  "version": "1.0.36",
  "type": "module",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "private": false,
  "peerDependencies": {
    "@emotion/styled": "^11.11.0",
    "classnames": "^2.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^2.1.0",
    "styled-components": "^6.1.8",
    "@floating-ui/react-dom": "^2.0.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "rollup src/App.tsx --format iife --name ui-shared-library --file bundle.js ",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "publishConfig": {
    "registry": "https://artifactory.ssnc.dev/artifactory/api/npm/xxxxmarketplace-npm-local/"
  },
  "strict-ssl": false,
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.23.3",
    "@mui/icons-material": "^5.15.5",
    "@mui/material": "^5.14.17",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.5.3",
    "@storybook/preset-create-react-app": "^7.5.3",
    "@storybook/react": "^7.5.3",
    "@storybook/react-webpack5": "^7.5.3",
    "@storybook/testing-library": "^0.2.2",
    "@testing-library/jest-dom": "6.4.2",
    "@testing-library/react": "14.2.1",
    "@testing-library/user-event": "14.5.2",
    "@types/jest": "29.5.12",
    "@types/node": "20.11.16",
    "@types/react": "^18.2.18",
    "babel-loader": "^9.1.3",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint-plugin-storybook": "^0.6.15",
    "prettier": "3.1.0",
    "prop-types": "^15.8.1",
    "react-scripts": "5.0.0",
    "rollup": "^4.9.6",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-sass": "^1.12.21",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-typescript2": "^0.36.0",
    "sass": "^1.69.5",
    "storybook": "^7.5.3",
    "styled-components": "^6.1.8",
    "tslib": "^2.6.2",
    "typescript": "4.8",
    "webpack": "^5.89.0"
  }
}

错误原因

共享库模块格式与Jest运行模式不兼容：共享库package.json设置了"type": "module"，说明它是ES模块，但Jest默认以CommonJS模式运行，无法直接解析ES模块的import语法；同时你的构建脚本生成的是iife格式的包，却未正确关联到main字段指向的文件，导致实际发布到node_modules的是未转译为CommonJS的ES模块代码。
Jest默认忽略node_modules转译：Jest默认不会转译node_modules目录下的文件，而你的共享库发布的代码包含未转译的ES模块语法，Jest解析时就会抛出Cannot use import statement outside a module的语法错误。
构建配置与产物路径不匹配：当前build脚本生成的是bundle.js，但package.json的main字段指向的是dist/index.js，说明实际发布的产物并非通过该脚本生成，或者路径配置错误，最终导致发布的代码格式不符合Jest的解析要求。

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