使用Jest与React Testing Library测试react-apexcharts时快照失败报错

问题概述 #

用react-apexcharts开发图表组件，通过Jest+React Testing Library生成快照时失败，报错TypeError: Cannot read properties of undefined (reading 'node')，且发现react-apexcharts已有一年未更新，想问是否需要更换其他库。

报错信息 #

Cannot read properties of undefined (reading 'node')
TypeError: Cannot read properties of undefined (reading 'node')
    at t.value // ...省略后续栈信息

组件代码（基础柱状图示例） #

function MyGraph() {
  const state = {
    options: {
      chart: {
        id: 'basic-bar'
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
      }
    },
    series: [
      {
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }
    ]
  };

  return (
    <Grid
      sx={{
        height: 500
      }}
    >
      <Chart options={state.options} series={state.series} type="bar" width="500" />
    </Grid>
  );
}

测试代码（Jest + React Testing Library） #

const Component = ({ status = mockData.status, resData = mockData.resData }) => {
  return <HistoricalDataGraph status={status} resData={resData} dataKey={mockData.dataKey} />;
};
  
it('should render correctly', () => {
    const { container } = render(<Component />);
    expect(container).toMatchSnapshot();
  });

解决测试报错的方法 #

这个报错是因为react-apexcharts依赖浏览器DOM环境里的node属性，而Jest的jsdom环境没法完全模拟图表渲染所需的API，可通过以下方式解决：

• Mock react-apexcharts组件：直接在Jest里Mock整个Chart组件，跳过真实渲染逻辑。在测试文件顶部加：

  jest.mock('react-apexcharts', () => () => <div data-testid="chart-mock" />);
  

  测试时会渲染一个占位div，不会触发图表的真实渲染，就能正常生成快照。

• 配置Jest模拟Canvas API：如果需要保留部分渲染逻辑，可安装jest-canvas-mock并配置：

  1. 安装依赖：npm install jest-canvas-mock --save-dev
  2. 在jest.config.js里添加：

     setupFiles: ['jest-canvas-mock']
     

  或者直接在测试文件顶部导入：import 'jest-canvas-mock';

• 用waitFor等待渲染稳定：如果图表是异步渲染的，可尝试等待组件稳定后再生成快照：

  it('should render correctly', async () => {
    const { container } = render(<Component />);
    await waitFor(() => expect(container.firstChild).toBeInTheDocument());
    expect(container).toMatchSnapshot();
  });
  

关于是否更换库的建议 #

react-apexcharts虽然一年没更新，但核心的apexcharts主库仍在正常维护，如果当前项目的图表需求能被满足，且通过上面的方法解决了测试问题，没必要急着换库。

如果确实需要更活跃的React图表库，可以考虑：

• Recharts：基于D3的React图表库，更新频繁，API友好，测试支持完善。
• Chart.js + react-chartjs-2：轻量易用，社区活跃，Mock测试简单。
• Victory：Formidable维护，定制化程度高，适合复杂图表场景。

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