使用 Jest & Enzyme 测试 AmCharts PieChart，将 PieChart 附加到 React 组件 - 切片未使用提供的数据更新

编程问答 2022-05-27

问题描述

我正在尝试编写关于通过 AmChart 库 (v4) 挂载 PieChart 的 React 类组件的测试。我设法配置了 babel，因此测试实际上正在运行。 到目前为止，我可以测试 react 和 amChart 实例的渲染/创建，并验证我作为 props 提供给 React 组件的数据是否已传送回引用的 amChart 对象。

下面是我如何编写 React 类的概述，以及我如何在测试中检索 PieChart 对象（称为 chart）的示例：

export default class Donut extends React.Component<DonutProps,{}> {
  public chart: any
  constructor(props: DonutProps) {
    super(props)
  }
  
  public componentDidMount() {
    const chart = am4core.create(`${this.props.name}-donut`,am4charts.PieChart)
    chart.data
    ...
    const pieSeries = chart.series.push(new am4charts.PieSeries())
    ...
  }

  public render(): JSX.Element {
    return <div id={`${this.props.name}-donut`} className="donutBlock" />
  }
}

it('Renders with the provided data',() => {
    const holder = document.createElement('div')
    document.body.appendChild(holder)
    const { name,data } = mockData
    const reactWrapper = mount(<Donut name={name} data={data} />,{ attachTo: holder })
    const chart = reactWrapper.instance().chart
    expect(isEqual(data,chart.data)).toBeTruthy()

}

看来关于提供的数据的测试通过了，但我无法在饼图切片上测试进一步的行为，图表中的相关键/值似乎没有随数据更新。 我正在尝试通过 chart.series.values[0].slices.values 访问切片列表（为了读取它们的一些属性，如 isActive）...不幸的是它返回一个空数组。

此外，我了解到在测试执行期间甚至没有引发“就绪”事件（这个事件应该在图表完成渲染时引发） - 我怀疑与更新问题有关我'我在这里提到。

基本上，我希望：

  • 在图表对象中获取与作为 props 提供的数据数组（每个对象定义一个切片）中的对象数量相同数量的切片
  • 获取一个切片对象，以便能够在其上模拟 'hit' 事件，并观察其 isActive 值的变化（默认情况下，将选择/激活被点击的切片）。

简而言之 - 如何使用 Jest 在我的测试上下文中检索饼图切片的更新列表？

非常欢迎任何帮助，谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

amchartsamcharts4javascriptjestjsreactjsreactjsreactjsreactjs