如何用Jest正确模拟含render props的React组件并解决覆盖率问题

我来帮你搞定这个问题！你遇到的是典型的「快照稳定性」和「测试覆盖率」之间的矛盾——完全mock掉Box虽然能避免快照受组件变更影响，但也直接跳过了原组件的代码执行，自然覆盖率就不达标了。下面给你几个实用的解决方案：

方案1：模拟一个能正确处理render props的Box组件 #

别直接把Box mock成字符串，而是写一个模拟组件，它会调用传入的renderBody prop并渲染其返回值。这样既保证快照只聚焦你关心的内容（也就是renderBody里的部分），又能让原Box组件的核心逻辑（比如渲染render props内容）在模拟中被「等效执行」，覆盖率统计就会认可这个逻辑。

示例代码：

jest.mock('components/Common/Box', () => ({
  __esModule: true,
  default: ({ renderBody }) => renderBody()
}));

这样模拟的Box会直接返回renderBody的执行结果，快照里只会显示BoxContent及内部内容，不会受Box自身结构变更影响。如果原Box还有其他props（比如className、样式）需要处理，可以扩展这个mock：

jest.mock('components/Common/Box', () => ({
  __esModule: true,
  default: ({ renderBody, className }) => (
    <div className={className}>{renderBody()}</div>
  )
}));

方案2：用jest.spyOn做部分mock（保留核心逻辑） #

如果原Box组件有自己的内部逻辑（比如状态管理、props校验）需要被测试覆盖，但你只是不想让它的外层结构干扰快照，可以用jest.spyOn来mock渲染部分，保留核心逻辑。

示例代码：

import Box from 'components/Common/Box';

jest.spyOn(Box, 'default').mockImplementation(({ renderBody }) => renderBody());

这种方式的好处是，后续要测试Box的其他逻辑时，随时可以恢复mock；当前测试中既保证了快照稳定，又让组件的核心逻辑被执行，不会拖垮覆盖率。

方案3：调整覆盖率排除规则（万不得已的选择） #

如果Box是纯UI容器组件，没有复杂业务逻辑，且你确实不需要统计它的覆盖率，可以在jest配置里把它排除在外。

在jest.config.js中添加：

module.exports = {
  // ...其他配置
  coveragePathIgnorePatterns: [
    '<rootDir>/src/components/Common/Box.js' // 替换成你的Box组件实际路径
  ]
};

不过这个方法不推荐作为首选——如果Box后续新增了逻辑，跳过覆盖率会隐藏潜在的未测试代码。

内容的提问来源于stack exchange，提问作者Albert Olivé Corbella