jsdom不支持svg？答案

【问题标题】：jsdom not support svg？jsdom不支持svg？
【发布时间】：2017-05-26 13:55:31
【问题描述】：

我下载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 不起作用。
我需要帮助。非常感谢！

【问题讨论】：

似乎是有意的，SVG 由 HTMLUnkownElement 表示：github.com/tmpvar/jsdom/issues/1371#issuecomment-177606614
@Scarysize 官方点这样使用：svg.outerHtml，我知道它的类型是字符串。所以，我用jQuery将它切换到typeof'Node'并尝试函数createSVGPoint：$(svg.outerHtml)[0].createSVGPoint，结果是：undefined ----- :(。我阅读了相关问题，核心问题也是jsdom@11.0 .0 不支持 SVG。
outerHTML 和 innerHTML 总是返回字符串

标签： javascript node.js reactjs jsdom

【解决方案1】：

感谢@Scarysize 的提前。
我在https://github.com/svgdotjs/svg.js/issues/464#issuecomment-200551245找到解决方案
在安装组件之前，我在我的 test-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;

【讨论】：

如果你使用 svg.js，你可以试试 svgdom，它是 svg.js 的伪 dom
如果您 1) 仅使用与问题相关的代码简化代码，2) 添加您用于所有要导入的库的版本，那就太好了。谢谢