本文解决 Jest 默认跳过 node_modules 转译导致的 SyntaxError: Cannot use import statement outside a module 问题，重点指导如何通过 transformIgnorePatterns 精准启用对内部设计系统包（如 design-system）的 Babel/TS-Jest 转译。
本文解决 jest 默认跳过 node_modules 转译导致的 syntaxerror: cannot use import statement outside a module 问题，重点指导如何通过 transformignorepatterns 精准启用对内部设计系统包（如 design-system）的 babel/ts-jest 转译。
在企业级前端项目中，将 Design System 作为独立包（如 design-system）本地开发并直接引用，是一种常见且高效的协作模式。然而，当该包以 ES Module 形式（含 import/export）构建并输出到 dist/ 目录后，Jest 在运行测试时会因默认忽略 node_modules 下所有文件的转译而报错：
SyntaxError: Cannot use import statement outside a module at /.../node_modules/design-system/dist/main.js:1
这是因为 Jest 的默认 transformIgnorePatterns 为 ["/node_modules/"] —— 它会完全跳过 node_modules 中所有文件的语法转换，仅依赖包自身发布的 CommonJS 版本。但你的 design-system 是内部未发布包，其 dist/main.js 保留了原生 ESM 语法（如 import 1qW$styledcomponents from "styled-components"），导致 Jest 解析失败。
海牙体系国际外观设计专利实务技能。覆盖海牙协定日内瓦文本(1999)、实施细则、行政规程、WIPO海牙体系指南、CNIPA业务流程指引及专利业务办理系统操作。适用于中国专利代理师处理外观设计国际申请全流程。触发词：海牙、外观设计国际申请、Hague、指定中国、eHague、DM/1、海牙审查、海牙驳回、单独指定费、专利审查指南、审查指南第六部分、DesignDB、海牙检索、海牙外观设计检索、WIPO外观设计数据库、designdb。使用场景：咨询国际申请流程、指定中国特别要求、CNIPA审查实务、费用查询
✅ 正确解法：白名单式放行
在 Jest 配置中显式声明需转译的模块，而非全局关闭忽略规则。推荐在 jest.config.js（或 package.json 的 jest 字段）中添加：
module.exports = {
// ...其他配置
transformIgnorePatterns: [
'node_modules/(?!design-system)' // ✅ 仅放行 design-system，其余仍被忽略
],
transform: {
'^.+\.(ts|tsx|js|jsx)$': 'ts-jest' // 或 'babel-jest'，取决于项目类型
},
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json']
};⚠️ 注意事项：
-
正则表达式需精确匹配：
node_modules/(?!design-system)表示“匹配node_modules/下 非design-system开头的路径”，从而让node_modules/design-system/进入转译流程。若包名为@company/design-system，应改为node_modules/(?!@company\/design-system)（注意转义斜杠）。 -
避免过度放行：切勿使用
"node_modules/"（空数组）或过于宽泛的模式（如node_modules/(?!.*-ui)），否则会大幅拖慢测试启动速度，并可能引发第三方包兼容性问题。 -
TypeScript 项目请用
ts-jest：若design-system使用 TypeScript 编写，确保transform指向ts-jest，并在根目录存在有效tsconfig.json；Babel 用户则需配置@babel/preset-env支持 ES modules。 -
配合
moduleNameMapper提升可维护性（可选）：若design-system存在别名路径（如@ds/components），建议同步配置moduleNameMapper映射真实路径，避免相对路径硬编码。
? 扩展建议：
对于多包设计系统（如 @myorg/core、@myorg/react），可扩展正则为：
transformIgnorePatterns: [ 'node_modules/(?!(@myorg\/core|@myorg\/react|design-system))' ]
最终效果：Jest 将对 node_modules/design-system/ 内所有 .js/.ts 文件执行转译，成功解析 ESM 语法，使组件测试（如 render(<tab></tab>)）顺利通过，同时保持对其他第三方库的高效处理。这是兼顾开发便利性与测试稳定性的最佳实践。
