如何为react-chartjs-2画布内交互点添加ID/类用于自动化测试？

首先明确：Chart.js 是通过 Canvas 绘制图表，所有数据点都是画布上的绘制元素，并非独立的 DOM 节点，没法直接给单个交互点添加 ID 或类。但可以通过以下几种方式实现自动化测试的点击跳转验证：

方案一：通过数据点标识+坐标定位触发点击 #

1. 先给数据点添加自定义标识，方便后续关联：

const data = {
  datasets: [{
    data: [
      { x: 1, y: 5, pointId: 'sales-q1' },
      { x: 2, y: 12, pointId: 'sales-q2' },
      // 其他数据点
    ]
  }]
};

2. 在测试中，获取 Chart 实例拿到对应点的坐标，再触发 Canvas 点击：

// 以 Cypress 为例
cy.get('#chartid').then($canvas => {
  const chart = Chart.getChart($canvas[0]);
  // 获取第一个数据点的坐标
  const targetPoint = chart.getDatasetMeta(0).data[0];
  // 触发对应坐标的点击
  cy.wrap($canvas).click(targetPoint.x, targetPoint.y);
});
// 验证跳转结果
cy.url().should('include', '/sales/detail/sales-q1');

方案二：在点击事件中暴露测试用标识 #

修改组件的点击逻辑，给 Canvas 元素添加临时标识，方便测试工具捕获：

<Line
  id={'chartid'}
  data={data}
  options={options}
  getElementAtEvent={(elements, event) => {
    if (elements.length) {
      // 给 Canvas 元素添加自定义属性，记录点击的点标识
      event.target.dataset.clickedPoint = elements[0].raw.pointId;
      // 原有跳转逻辑
      window.location.href = `/sales/detail/${elements[0].raw.pointId}`;
    }
  }}
/>

测试时可以先验证标识，再检查跳转：

// 以 Playwright 为例
const canvas = page.locator('#chartid');
// 点击目标区域（可通过坐标或其他方式定位）
await canvas.click({ position: { x: 80, y: 150 } });
// 验证点击的点标识
const clickedPoint = await canvas.getAttribute('data-clicked-point');
expect(clickedPoint).toBe('sales-q1');
// 验证跳转URL
await expect(page).toHaveURL('/sales/detail/sales-q1');

方案三：跳过UI点击，直接测试跳转逻辑 #

如果测试重点是跳转逻辑的正确性，而非 UI 交互本身，可以把跳转逻辑抽成独立函数，直接测试函数：

// 提取跳转逻辑为独立函数
export const handleChartPointClick = (point) => {
  window.location.href = `/sales/detail/${point.pointId}`;
};

// 组件中使用
<Line
  id={'chartid'}
  data={data}
  options={options}
  getElementAtEvent={(elements) => {
    if (elements.length) {
      handleChartPointClick(elements[0].raw);
    }
  }}
/>

测试时直接调用函数验证：

// Jest 示例
import { handleChartPointClick } from './your-chart-component';

test('chart point click redirects to correct URL', () => {
  // 模拟 window.location
  delete window.location;
  window.location = { href: '' };
  
  handleChartPointClick({ pointId: 'sales-q1' });
  expect(window.location.href).toBe('http://localhost/sales/detail/sales-q1');
});

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