如何用Jest和Enzyme测试含嵌套子组件的React组件并解决c3导入错误？

你遇到的问题核心是测试环境与浏览器环境的DOM支持差异——浏览器能完整支撑c3的SVG渲染需求，但单元测试常用的jsdom（比如Jest默认环境）对部分DOM API的模拟不够完善，导致c3初始化时抛出Cannot read property 'prototype' of undefined错误。下面是具体的修复方案和建议：

1. 优先Mock c3库 #

单元测试的核心是验证你的组件逻辑，而非第三方库的功能，直接mock c3是最高效的解决方案：

局部Mock（针对单个测试文件） #

在你的测试文件顶部添加mock代码：

jest.mock('c3', () => ({
  // 根据组件中使用c3的实际方式，返回对应的模拟函数/对象
  generate: jest.fn(),
  // 如果组件用到c3的其他方法，在这里补充模拟即可
}));

全局Mock（适用于所有测试文件） #

如果多个组件都依赖c3，可以在Jest配置中全局mock：
首先在jest.config.js中指定初始化文件：

module.exports = {
  // 其他配置项...
  setupFilesAfterEnv: ['./jest.setup.js'],
};

然后在jest.setup.js中添加全局mock：

jest.mock('c3', () => ({
  generate: jest.fn(),
}));

2. （可选）完善测试环境的DOM支持 #

如果不想mock c3，也可以尝试补全jsdom的环境支持。比如c3依赖SVG相关API，部分旧版本jsdom对其支持不足，你可以：

• 更新jsdom到最新版本
• 在测试文件顶部手动补充缺失的API：

  if (!global.SVGSVGElement) {
    global.SVGSVGElement = function() {};
  }
  

不过这种方法比较繁琐，不如直接mock来得省心。

3. 关于子组件的Mock建议 #

是否需要mock子组件（比如ComponentB、Table、Link），取决于你的测试目标：

• 如果是单元测试（只关注ComponentA本身的逻辑，不关心子组件内部行为）：建议mock所有子组件，避免子组件的依赖问题干扰ComponentA的测试。示例：

  jest.mock('./ComponentB', () => () => <div>Mocked ComponentB</div>);
  jest.mock('components', () => ({
    Table: () => <div>Mocked Table</div>,
    Link: () => <div>Mocked Link</div>,
  }));
  

• 如果是集成测试（需要验证ComponentA与子组件的交互）：可以不mock子组件，但要确保子组件的依赖（比如c3）也被正确处理。

为什么网站运行正常但测试报错？ #

浏览器提供了完整的DOM和SVG运行环境，c3可以正常初始化；而单元测试用的jsdom是轻量级DOM模拟环境，缺少c3运行时需要的部分API（比如某些SVG构造函数），因此加载时抛出异常。

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