React项目Jest测试中命名导入报错，整体导入正常的问题

先明确你的项目模块结构：

feature1
├── actions
│   ├── actionTypes.js
│   └── crud.js
├── component.js
├── container.js
├── reducer.js
├── sagas.js
├── sagas.test.js
├── services.js
└── index.js
feature2
├── actions
│   ├── actionTypes.js
│   └── crud.js
├── component.js
├── container.js
├── reducer.js
├── sagas.js
├── sagas.test.js
├── services.js
└── index.js

每个feature的index.js会统一导出当前模块的核心内容，以feature1/index.js为例：

import myReducer from './reducer';
import * as mySagas from './sagas';
import * as myServices from './services';
import * as myCRUD from './actions/crud';
import Component from './component';
import Container from './container';
import * as actionTypes from './actions/actionTypes';

export { myReducer, actionTypes, myCRUD, mySagas, myServices, Component, Container };

问题场景 #

在feature2/sagas.test.js中，两种导入feature1 services的方式出现了截然不同的结果：

1. 报错的导入方式：

import { myServices } from '../feature1';

运行Jest测试时抛出错误：TypeError: window.locale_name is not a function，其中window.locale_name是feature1依赖的第三方库定义的全局函数。

2. 正常的导入方式：

import * as myServices from '../feature1/services';

测试完全正常，无任何报错。

问题核心原因 #

这两种方式的本质差异在于模块加载时的依赖范围：

• 当你从../feature1导入时，实际加载的是feature1/index.js，而这个文件导入了feature1下的所有模块（包括component.js、container.js、sagas.js等）。其中某个模块（大概率是组件类模块，因为这类模块常在导入阶段就执行国际化相关的全局函数调用）在加载时就调用了window.locale_name，但Jest运行在Node.js环境中，默认没有浏览器的window对象及这个全局函数，因此触发了错误。
• 直接导入../feature1/services.js时，只会加载services.js这一个模块，不会触发feature1下其他依赖window.locale_name的模块执行，自然不会出现报错。

解决方法 #

你可以根据项目实际情况选择以下方案：

方案1：保持直接导入具体模块文件（最简单） #

继续使用import * as myServices from '../feature1/services';的方式，只导入实际需要的模块，避免加载整个feature的index文件带来的不必要依赖。这种方式改动最小，适合快速解决问题。

方案2：在Jest测试环境中模拟全局函数 #

如果必须通过feature1/index.js导入，可以在测试文件或Jest全局配置中模拟window.locale_name函数：

• 单个测试文件顶部添加（需放在导入feature1的代码之前）：

window.locale_name = jest.fn(() => 'en-US'); // 可根据测试需求返回对应值

• 或者在项目根目录的jest.setup.js（需在jest.config.js中配置setupFilesAfterEnv指向该文件）中添加全局模拟，让所有测试文件生效：

window.locale_name = jest.fn(() => 'en-US');

方案3：优化feature的导出结构 #

把feature1/index.js的导出拆分成多个入口，比如拆分出专门的服务入口和业务逻辑入口：

• 创建feature1/services/index.js，专门导出services相关内容
• 修改feature1/index.js仅导出组件、reducer等业务逻辑模块
  这样测试时从../feature1/services导入，业务代码从../feature1导入，兼顾便捷性和测试稳定性。

方案4：调整模块初始化逻辑 #

检查feature1中哪个模块在导入阶段就执行了window.locale_name，将这类逻辑改为懒执行：
比如原本在组件模块顶部直接调用：

// 错误示例：模块加载时就执行
const currentLocale = window.locale_name();

改成在组件挂载或函数调用时才执行：

// 正确示例：在组件内部执行
const MyComponent = () => {
  const currentLocale = window.locale_name();
  // ...
};

也可以使用懒加载组件的方式，避免模块加载时触发全局函数调用。

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