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?

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