我有一个HTML <canvas>元素，它使用onTouchEnd属性获取画布内容并转换为dataUrl，但Jest不支持这个属性。
大多数文章都建议添加jest-canvas-mock库来模拟所有HTMLCanvasElement的内容，但这似乎有些多余，因为我只需要模拟toDataURL方法，所以我想检查一下如何使用jest.mock或jest.spyOn来模拟toDataURL（）并返回一个固定的字符串。
为了说明清楚，我需要这个函数是因为onChange函数设置了一个状态值（useState），该值控制按钮是否启用。
Component.js

export default function MyComponent() {

  const setTouchPosition = e => {
    const canvas = document.getElementById('canvas');

    const rect = canvas.getBoundingClientRect();
    // .. a few lines omitted for readability
  };

  const draw = e => {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    // .. a few lines omitted for readability
  };

  return (
    <canvas
        onTouchEnd={e => {
              onChange(e.target.toDataURL());
              onTouchMove={e => draw(e)}
              onTouchStart={e => {
                setTouchPosition(e);
              }}
            }}
        />
  );
}

View.js

export default function MyView() {

  const [data, setData] = useState('');
  const onChange = image => {
    setData(image);
  };

  return (
    <Button disabled={data === ''}>Button label</Button>
  );
}

如果Component.js不调用onChange函数，我就无法启用此Button并在其上使用fireEvent。