jsdom不支持svg？

Question

我下载jsdom@11.0.0是为了让我的react项目测试更简单。但是我发现jsdom不能创建svg元素。
代码如下：

const dc = (new JSDOM(`...`)).window.document;
var svg = dc.createElementNS("http://www.w3.org/2000/svg", "svg");
var div = dc.createElement("div");
var svg2 = dc.createElement("svg");
console.log("svg:", svg, svg.createSVGPoint);
console.log("div:", div);
console.log("svg2:", svg2, svg2.createSVGPoint);

结果为：

svg: HTMLUnknownElement {} undefined
div: HTMLDivElement {}
svg2: HTMLUnknownElement {} undefined

我想在我的代码中做一些测试，但是 svg 不起作用。
我需要帮助。非常感谢！

Answer 1

感谢@Scarysize 的预付款。
我在 https://github.com/svgdotjs/svg.js/issues/464#issuecomment-200551245
找到了解决方案我在我的测试中做了一些作弊流程-helper.js 在安装组件之前测试（摩卡反应酶）：

// import modules
import React from "react";  
import TestUtils from "react-dom/test-utils";
import { render, mount, shallow } from "enzyme";              
import { expect } from "chai";
import sinon from "sinon";
import jsdom from "jsdom";
import $ from "jquery";

const { JSDOM } = jsdom;

// jQuery plugins
const scripts = [
  '<script src="./public/vendor/jquery.nicescroll/jquery.nicescroll.min.js"></script>',
];

// init jsdom
const dom = new JSDOM(
  '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>'+ 
  scripts.join(" ") +'</head><body></body></html>', 
  { 
    contentType: "text/html",
    includeNodeLocations: true,
    resources: "usable",
    runScripts: "dangerously",
  }
);

// global statement, order is important
global.window = dom.window;
global.document = global.window.document;
global.navigator = global.window.navigator;
global.$ = $(global.window);
// other plugins, need window, document or navigator ....
const Mousetrap = require("mousetrap");
const { TweenMax } = require("gsap");
const Draggable = require("gsap/Draggable");

// svg CHEATING
const tempDocument = (new JSDOM(`...`)).window.document;
var svg = tempDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
// in this function, you need set the error about:
// property of "sth" undefined, to define a object
// "sth" is not a function, to define a function
// and so other errors
function cheatCreateElementNS (ns, name) {
  var el = global.$(svg.outerHTML)[0];

  el.createSVGPoint = () => {
    return {
      matrixTransform: () => {
        return el.createSVGPoint();
      }
    }
  };
  el.getScreenCTM = () => {
    return {
      e: {}
    }
  }
  return el;
}

// Cheating :)
document.createElementNS = cheatCreateElementNS;

// other global statement
global.expect = expect;
global.sinon = sinon;
global.React = React;
global.TestUtils = TestUtils;
global.mount = mount;
global.shallow = shallow;
global.render = render;
global.Mousetrap = Mousetrap;
global.TweenMax = TweenMax;
global.Draggable = Draggable;

jsdom不支持svg？

jsdom not support svg？

javascript

node.js

jsdom

reactjs