Почему при подключении в Enzyme диаграмма ReCharts с ResponsiveContainer не отображает дочерние элементы диаграммы? - PullRequest
Новая
       9

Почему при подключении в Enzyme диаграмма ReCharts с ResponsiveContainer не отображает дочерние элементы диаграммы?

1 голос
/ 13 февраля 2020

Учитывая, что у меня есть диаграмма, использующая React и Recharts, вот так: 

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

Почему монтирование в Enzyme с JsDom не делает дочерних элементов LineChart (ie Line) не монтируется)?

1 Ответ

2 голосов
/ 13 февраля 2020

При написании адаптивного компонента ReCharts для веб-страницы передача строки в width или height опору ResponsiveChart действительна и будет отображаться в разметке HTML. Однако для компонента диаграммы ниже (LineChart или любой другой диаграммы) требуется указанная c целочисленная ширина. Если он получит строку, он не сможет проверка ширины / высоты и вернуть ноль вместо рендеринга.

Предположительно ResponsiveChart отвечает за отправку правильной ширины / Высота опоры для детей это отзывчиво. Но по какой-то причине он не делает этого при монтировании (возможно, потому, что JsDom не эмулирует некоторую особенность window), поэтому вместо этого он отправляет строки, что приводит к тому, что диаграмма не отображает свои дочерние элементы без возврата или регистрации любое сообщение об ошибке.

Чтобы исправить это, добавьте допустимое целочисленное значение для ширины и высоты: 

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

В моем случае я добавил опору, чтобы оставить строку в качестве значения по умолчанию, но разрешить переопределение в контексте теста ie: width={this.props.width || "99%"}.

...