Jest无法转换自研设计系统包的配置修复咨询

云原生阿岚

2026-7-6

问题：基于Material UI的设计系统Jest测试报错：Cannot use import statement outside a module

我们公司基于Material UI构建了一套设计系统，应用与设计系统本身运行正常，但使用Jest执行测试时遇到错误：

❯ npx jest
 FAIL  src/App.test.tsx
  ● 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/antoniogamizdelgado/badger/minimal-example/frontends/design-system/dist/main.js:1
    ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,jest){import $681qW$styledcomponents from "styled-components";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import * as React from 'react';
    &gt; 2 | import {Tab} from "design-system";
        | ^
      3 | import {render} from "@testing-library/react";
      4 |
      5 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.&lt;anonymous&gt; (src/App.test.tsx:2:1)

我们已制作最小复现示例，复现步骤：

在设计系统目录执行：
```
npm ci
npm run build
```
在应用包目录执行：
```
npm ci
npx jest
```

现有转换器未生效，咨询如何修复Jest配置。

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado