在 Enzyme 中安装时，为什么带有 ResponsiveContainer 的 ReCharts 图表不呈现图表的子元素？

Question

鉴于我有一个使用 React 和 Recharts 的图表，如下所示：

<ResponsiveContainer width="99%" height="99%">
  <LineChart data={data}>
    <Line dataKey="test"/>
  </LineChart>
</ResponsiveContainer>

为什么使用 JsDom 在 Enzyme 中安装它不会呈现 LineChart 的子项（即 Line 未安装）？

Answer 1

在为网页编写响应式 ReCharts 组件时，将字符串传递给 ResponsiveChart 的 width 或 height 属性是有效的，并将呈现在 HTML 标记。但是，下面的图表组件（无论是 LineChart 还是任何其他图表）都需要特定的整数宽度。如果它收到一个字符串，它将失败 a width/height validation and return null 而不是渲染。

据推测，ResponsiveChart 负责发送正确的 width/height 道具给它的 children。但是无论出于何种原因，它在挂载时都不会执行此操作（可能是因为 window 的某些功能未被 JsDom 模拟），因此它会发送字符串，这会导致图表无法呈现它的 children, 不返回或记录任何错误消息。

要解决这个问题，请为宽度和高度添加一个有效的整数值：

<ResponsiveContainer width={700} height={300}>
  <LineChart data={data}>
    <Line dataKey="test"/>
  </LineChart>
</ResponsiveContainer>

在我的例子中，我添加了一个 prop 以将字符串保留为默认值，但允许在测试上下文中进行覆盖，即：width={this.props.width || "99%"}.

在 Enzyme 中安装时，为什么带有 ResponsiveContainer 的 ReCharts 图表不呈现图表的子元素？

When mounted in Enzyme, why does a ReCharts chart with a ResponsiveContainer not render the child elements of the chart?

javascript

enzyme

recharts