单元测试报TypeError: Cannot read properties of undefined (reading 'default')求解答

问题场景 #

项目components文件夹包含以下两个文件：

index.ts #

export { default as UnborderCollapse } from './UnborderCollapse'

UnborderCollapse.tsx #

const UnborderCollapse = (props: Props) => {...some code here...}

UnborderCollapse.Item = Item
UnborderCollapse.Actions = Actions
UnborderCollapse.LeftGroup = LeftGroup
UnborderCollapse.RightGroup = RightGroup

export default UnborderCollapse

运行单元测试时触发如下错误：

FAIL [.....path to file]
  ● Test suite failed to run
    TypeError: Cannot read properties of undefined (reading 'default')


      at Object.UnborderCollapse (src/components/index.ts:272:30)

可能的原因及排查方向 #

• 循环引用：如果UnborderCollapse.tsx依赖的Item/Actions等组件，反过来从components/index.ts导入内容，会形成循环引用。此时模块加载时UnborderCollapse还未完成导出，index.ts就尝试读取它的default，导致报错。

  • 排查：检查所有子组件的导入语句，将引用index.ts的代码改为直接引用具体文件。

• 测试环境模块解析异常：单元测试框架（如Jest）的配置未正确处理.tsx文件，导致./UnborderCollapse路径无法解析到对应的TSX文件，返回空模块。

  • 排查：确认测试配置中moduleFileExtensions包含tsx，且已配置ts-jest等工具处理TypeScript文件。

• 导入顺序/路径错误：测试文件中导入UnborderCollapse的时机过早，或导入路径有误，导致模块未加载完成就被引用。

  • 排查：尝试在测试文件中直接导入../components/UnborderCollapse而非从index.ts导入，看是否仍报错；同时核对导入路径的正确性。

• TS转译配置不兼容：tsconfig.json中的module、target等配置与测试环境不匹配，转译后的代码丢失了UnborderCollapse的default导出。

  • 排查：查看转译后的JS文件，确认UnborderCollapse的导出语句是否正常（如module.exports.default = UnborderCollapse），调整TS配置使其适配测试环境。

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