ReferenceError: SVGPathElement is not defined

[marinho]

Basics

• Using Jest version 22.1.4, with TypeScript 2.6.2 and jsdom environment.
• This seems to be a bug.

What is the current behavior?

When using path-data-polyfill.js, it uses SVGPathElement.prototype to add methods that were removed from SVG API in Chrome (i.e. getPathData, setPathData and others).

When running Jest with jsdom, it complains ReferenceError: SVGPathElement is not defined.

I made a quick search in jsdom source code and couldn't find any mention to SVGPathElement

Not only SVGPathElement is missing but also SVGRectElement, SVGCircleElement, SVGEllipseElement, SVGLineElement, SVGPolylineElement and SVGPolygonElement.

As I'm using jsdom only for running Jest tests and compilation through tsc works fine, I guessed the right place to report this issue was in here - not in jsdom repo - please correct me if I am wrong.

What is the expected behavior?

I would expect any SVG basic element class to be present when running tests with Jest.

This is how my --debug did output config:

{
  "configs": [
    {
      "automock": false,
      "browser": false,
      "cache": true,
      "cacheDirectory": "/var/folders/lq/ztg_mkn935x1y5gmyw8cfw_80000gn/T/jest_dx",
      "clearMocks": false,
      "coveragePathIgnorePatterns": [
        "/node_modules/",
        "/test/",
        "/dist/",
        "/test/helpers/",
        "/test/test-examples/"
      ],
      "detectLeaks": false,
      "forceCoverageMatch": [],
      "globals": {},
      "haste": {
        "providesModuleNodeModules": []
      },
      "moduleDirectories": [
        "node_modules"
      ],
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
      ],
      "moduleNameMapper": {},
      "modulePathIgnorePatterns": [],
      "name": "e444587e65998f707a150efb3a23fdbc",
      "resetMocks": false,
      "resetModules": false,
      "restoreMocks": false,
      "rootDir": "/Users/setup/Working/my-lib",
      "roots": [
        "/Users/setup/Working/my-lib"
      ],
      "runner": "jest-runner",
      "setupFiles": [],
      "snapshotSerializers": [],
      "testEnvironment": "jest-environment-jsdom",
      "testEnvironmentOptions": {},
      "testLocationInResults": false,
      "testMatch": [],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
      "testRunner": "/Users/setup/Working/my-lib/node_modules/jest/node_modules/jest-jasmine2/build/index.js",
      "testURL": "about:blank",
      "timers": "real",
      "transform": [
        [
          ".(ts|tsx)",
          "/Users/setup/Working/my-lib/node_modules/ts-jest/preprocessor.js"
        ]
      ],
      "transformIgnorePatterns": [
        "/node_modules/"
      ],
      "watchPathIgnorePatterns": []
    }
  ],
  "globalConfig": {
    "bail": false,
    "changedFilesWithAncestor": false,
    "collectCoverage": true,
    "coverageDirectory": "/Users/setup/Working/my-lib/coverage",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 0,
        "functions": 0,
        "lines": 0,
        "statements": 0
      }
    },
    "detectLeaks": false,
    "expand": false,
    "globalSetup": null,
    "globalTeardown": null,
    "listTests": false,
    "mapCoverage": true,
    "maxWorkers": 3,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "passWithNoTests": false,
    "rootDir": "/Users/setup/Working/my-lib",
    "runTestsByPath": false,
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "22.1.4"
}

[quantizor]

Looks like it's not implemented in JSDOM: https://github.com/tmpvar/jsdom/tree/master/lib/jsdom/living/nodes

You should definitely move this issue there, as they would be the ones to build support.

In the meantime, you can monkeypatch support in a setup file like this I think?

class SVGPathElement extends HTMLElement {}

window.SVGPathElement = SVGPathElement

[SimenB]

Thanks @probablyup! The issue should indeed be raised over there.

[marinho]

thanks guys, I'm going to move it in there.

BTW, I solved it with a similar approach, adding the missing classes to global entry in the config object.

[pedrottimark]

@marinho Agree that jsdom is the place to raise the issue. I am interested to understand:

• do any of your tests call the polyfilled methods?
• or you just needed to get rid of the ReferenceError?

[marinho]

hi @pedrottimark,

I'm calling a function that internally call some of the polyfilled methods, but I don't need the function itself, so, I solved it by creating SVGPathElement function and its prototype and included them in global in jest.config.js.

It works, although I will try to implement it in jsdom as a better practice.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.