Jest无法解析含MUI组件的内部React组件库问题求助

我在Vite + TypeScript项目中配置Jest和react-testing-library时，引入了公司内部通过npm安装的React组件库（基于MUI组件重导出）。最初Jest无法找到该模块，配置moduleNameMapper后又遇到了ES模块语法解析错误，报错信息如下：

● 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.


Details:

/home/user/source/apps/portal/saas-cloud-service-manager-next/app/saas-csm-web/node_modules/@my-org/portal-ui/build/portal-ui.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { jsx as w, jsxs as i, Fragment as Q } from "react/jsx-runtime";
                                                                                  ^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import { Container, Grid, Skeleton, Stack, Typography } from '@mui/material';
> 2 | import { EmptyContent, useMultiTenant } from '@my-org/portal-ui';
    | ^
  3 | import { AxiosError } from 'axios';
  4 | import { debounce } from 'lodash';
  5 | import NProgress from 'nprogress';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
  at Object.require (src/pages/Overview/Overview.tsx:2:1)
  at Object.<anonymous> (src/pages/Overview/Overview.test.tsx:3:1)

当前使用的配置文件如下：

jest.config.ts #

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.ts'],
  moduleNameMapper: {
    '^@my-org/portal-ui$': '<rootDir>/node_modules/@my-org/portal-ui/build/portal-ui.js',
  },
};

export default config;

src/tests/setupTests.ts #

import '@testing-library/jest-dom';

tsconfig.json #

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    // "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "allowJs": false,
    "forceConsistentCasingInFileNames": true,
    "types": ["@testing-library/jest-dom"],
    "esModuleInterop": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

解决方案 #

1. 让Jest转换内部组件库代码

Jest默认会跳过node_modules目录下的文件转换，但你的内部组件库输出的是未编译的ES模块语法，需要显式让Jest处理它。修改jest.config.ts：

• 移除之前的moduleNameMapper（如果组件库的package.json中main字段配置正确，Jest能自动找到入口）
• 添加transformIgnorePatterns，排除你的内部库，让ts-jest对其进行转换

修改后的jest.config.ts：

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.ts'],
  // 让ts-jest处理内部组件库，排除其他node_modules依赖
  transformIgnorePatterns: ['/node_modules/(?!@my-org/portal-ui)'],
  // 如果组件库的路径映射还是有问题，可以保留moduleNameMapper，但确保配合transform使用
  // moduleNameMapper: {
  //   '^@my-org/portal-ui$': '<rootDir>/node_modules/@my-org/portal-ui/build/portal-ui.js',
  // },
};

export default config;

2. 确保ts-jest使用项目的TS配置

在jest配置中指定tsconfig路径，确保JSX和ES模块转换规则和项目一致：
在jest.config.ts中添加：

globals: {
  'ts-jest': {
    tsconfig: '<rootDir>/tsconfig.json',
  },
},

3. 检查内部组件库的package.json配置

确认组件库的package.json中：

• main或module字段指向正确的编译后文件
• 如果库只提供ES模块输出，必须让Jest对其进行转换（即步骤1的配置）

错误原因说明 #

之前配置moduleNameMapper直接指向了组件库的ES模块文件，但Jest默认不转换node_modules下的文件，导致遇到import语法时无法解析，抛出"Cannot use import statement outside a module"错误。通过让Jest转换该内部库，就能解决ES模块语法的解析问题。

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