Mock Missing SVG Functions in JSDom for Jest

setupTests.ts

beforeEach(()=>{

  Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGMatrix', {
    writable: true,
    value: jest.fn().mockImplementation(() => ({
      martix: jest.fn(() => [[]]),
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0,
      f: 0,
      flipX: jest.fn().mockImplementation(() => global.SVGSVGElement),
      flipY: jest.fn().mockImplementation(() => global.SVGSVGElement),
      inverse: jest.fn().mockImplementation(() => global.SVGSVGElement),
      multiply: jest.fn().mockImplementation(() => global.SVGSVGElement),
      rotate: jest.fn().mockImplementation(() => ({
        translate: jest.fn().mockImplementation(() => ({
          rotate: jest.fn(),
        })),
      })),
      rotateFromVector: jest.fn().mockImplementation(() => global.SVGSVGElement),
      scale: jest.fn().mockImplementation(() => global.SVGSVGElement),
      scaleNonUniform: jest.fn().mockImplementation(() => global.SVGSVGElement),
      skewX: jest.fn().mockImplementation(() => global.SVGSVGElement),
      skewY: jest.fn().mockImplementation(() => global.SVGSVGElement),
      translate: jest.fn().mockImplementation(() => ({
        multiply: jest.fn().mockImplementation(() => ({
          multiply: jest.fn().mockImplementation(() => global.SVGSVGElement),
        })),
      })),
    })),
  });

  Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGPoint', {
    writable: true,
    value: jest.fn().mockImplementation(() => ({
      x: 0,
      y: 0,
      matrixTransform: jest.fn().mockImplementation(() => ({
        x: 0,
        y: 0,
      })),
    })),
  });

  Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGTransform', {
    writable: true,
    value: jest.fn().mockImplementation(() => ({
      angle: 0,
      matrix: {
        a: 1,
        b: 0,
        c: 0,
        d: 1,
        e: 0,
        f: 0,
        multiply: jest.fn(),
      },
      setMatrix: jest.fn(),
      setTranslate: jest.fn(),
    })),
  });
});

I think there is a typo. Shouldn't it be matrix instead of martix?

Just for reference: the three functions you mock have the following issues on jsdom:

• SVGSVGElement.createSVGMatrix - jsdom/jsdom#2716 - (it's part of Geometry Interfaces Module Level 1)

• SVGSVGElement.createSVGPoint - jsdom/jsdom#300

• SVGSVGElement.createSVGTransform - mentioned but disabled in https://github.com/jsdom/jsdom/blob/04541b377d9949d6ab56866760b7883a23db0577/lib/jsdom/living/nodes/SVGSVGElement.webidl#L26 - maybe because of the reasons mentioned in jsdom/jsdom#2716

---

According to what I find online, the implementation of SVGSVGElement.createSVGMatrix should (according to https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement#svgsvgelement.createsvgmatrix) not return a mock implementation of global.SVGSVGElement but of SVGMatrix - see https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly#dommatrixreadonly.flipy.

Here's the updated mock:

  Object.defineProperty(global.SVGSVGElement.prototype, "createSVGMatrix", {
    writable: true,
    value: vi.fn().mockImplementation(() => ({
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0,
      f: 0,
      flipX: vi.fn().mockImplementation(() => SVGMatrix),
      flipY: vi.fn().mockImplementation(() => SVGMatrix),
      inverse: vi.fn().mockImplementation(() => SVGMatrix),
      multiply: vi.fn().mockImplementation(() => SVGMatrix),
      rotate: vi.fn().mockImplementation(() => SVGMatrix),
      rotateFromVector: vi.fn().mockImplementation(() => SVGMatrix),
      scale: vi.fn().mockImplementation(() => SVGMatrix),
      scaleNonUniform: vi.fn().mockImplementation(() => SVGMatrix),
      skewX: vi.fn().mockImplementation(() => SVGMatrix),
      skewY: vi.fn().mockImplementation(() => SVGMatrix),
      translate: vi.fn().mockImplementation(() => SVGMatrix),
    })),
  });