Angular Jest测试中解决canvas getContext返回undefined问题

你遇到的错误是因为只mock了HTMLCanvasElement.prototype.getContext，但它默认返回undefined，导致text变量为undefined，无法设置font属性。需要让mock的getContext返回一个模拟的2D上下文对象，同时还要确保getComputedStyle能返回有效的字体样式。

修改你的测试代码如下：

beforeEach(() => {
  // 模拟Canvas 2D上下文对象
  const mockCanvasContext = {
    font: '',
    // 模拟measureText方法，返回自定义宽度（可根据测试需求调整）
    measureText: jest.fn((inputText) => ({ width: inputText.length * 7 }))
  };

  // 让getContext返回模拟的上下文
  HTMLCanvasElement.prototype.getContext = jest.fn(() => mockCanvasContext);

  // mock getComputedStyle，返回包含font的样式对象
  jest.spyOn(window, 'getComputedStyle').mockReturnValue({ 
    font: '14px sans-serif' 
  } as CSSStyleDeclaration);

  fixture.detectChanges();
});

说明： #

• mockCanvasContext模拟了Canvas 2D上下文的必要属性和方法：font用于接收赋值，measureText返回模拟的文本宽度，你可以根据测试场景调整宽度计算逻辑。
• 额外mockgetComputedStyle是为了确保能从组件元素上获取到有效的font值，避免后续可能的报错。

如果需要在单个测试用例中自定义返回的宽度，还可以这样做：

it('should calculate correct text width', () => {
  // 获取之前模拟的上下文对象
  const mockContext = (HTMLCanvasElement.prototype.getContext as jest.Mock).mock.results[0].value;
  // 自定义当前测试的宽度返回值
  mockContext.measureText.mockReturnValue({ width: 85 });

  const result = component.getWidth('Hello World');
  expect(result).toBe(85);
  // 验证font是否被正确设置
  expect(mockContext.font).toBe('14px sans-serif');
});

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