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(),
    })),
  });
});

Not I mocked this by hit n trial and for my own specific use case, but I can give you and idea how to go about doing that.

If you want to check what properties some function like createSVGTransform has,

1. Get a reference to a rendered SVG DOM Element like document.querySelector('svg') which would be SVGSVGElement
2. use that reference to run the method svgRef.craeteSVGTransform() check the result + prototype prop for all props and method on that functions result and mock those

Where does the global object come from? I'm trying to implement this in my script but global is not declared...

Where does the global object come from? I'm trying to implement this in my script but global is not declared...

It's a new feature in JS, It's equal to global scope this or window object (in browser).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

If it's not working in you Jest Env, you should check you NodeJS version it should be 12+

Oh right, thanks that's useful to know.

I managed to sort out the issue I was having (how to prototype an svg method). jsdom/jsdom#3159

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