如何在Recharts的BarChart组件中正确传入数据并完成测试？

你当前的问题出在mock ResponsiveContainer时直接替换了原本App中的BarChart组件，导致App里的BarChart无法正常接收自身的data属性。正确的做法应该是保留ResponsiveContainer的原有子组件（即App中集成的BarChart），仅为测试场景固定容器尺寸，让BarChart正常使用App传递的数据。

修复步骤 #

1. 修正ResponsiveContainer的Mock逻辑 #

不需要在mock中硬渲染BarChart，而是直接将传入的children（也就是App里的BarChart）放到固定尺寸的ResponsiveContainer中。这样App里的BarChart会正常接收它自己的data属性，测试时就能正确渲染。

修改后的jest.mock代码：

jest.mock('recharts', () => {
  const OriginalModule = jest.requireActual('recharts');
  return {
    ...OriginalModule,
    // 仅固定ResponsiveContainer的宽高，保留原有子组件
    ResponsiveContainer: ({ children, ...props }: any) => (
      <OriginalModule.ResponsiveContainer width={800} height={800} {...props}>
        {children}
      </OriginalModule.ResponsiveContainer>
    ),
  };
});

2. 确保App能正确传递数据到BarChart #

如果你的App是通过接口获取数据后传递给BarChart，在测试中可以mock对应的API请求，返回你定义的mocks数据。比如：

// 假设App调用了fetchVeggieData接口获取图表数据
jest.mock('../services/dataService', () => ({
  fetchVeggieData: jest.fn().mockResolvedValue(mocks),
}));

3. 调整测试用例验证图表渲染 #

测试时可以通过查找图表中的数据文本，验证BarChart是否正确渲染了数据：

test('renders BarChart with mock data', async () => {
  render(<App />);
  // 触发数据加载（比如点击按钮获取数据）
  userEvent.click(screen.getByText(/submit/i));
  // 等待数据渲染完成
  await screen.findByText('Kiwi');
  await screen.findByText('Pineapple');
  // 验证数据存在
  expect(screen.getByText('Kiwi')).toBeInTheDocument();
  expect(screen.getByText('Pineapple')).toBeInTheDocument();
});

关键说明 #

• 不要在mock组件中硬替换业务组件（BarChart），否则会阻断App内部的数据传递逻辑。
• 测试应该模拟真实的用户行为和数据流向：用户操作→App获取数据→数据传递给BarChart→图表渲染。
• 固定ResponsiveContainer尺寸是为了解决测试环境中容器无法自适应的问题，这一步合理，但要保留原有组件结构。

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