jsdom不支持SVG

我下載[email protected]讓我的反應項目的測試更容易但我發現了jsdom不能創建SVG元素
代碼如下：。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是不行的。
我需要幫助。非常感謝你！

來源

2017-05-25 Zehui Chen

好像它意，即SVG由代表HTMLUnkownElement：https://github.com/tmpvar/jsdom/issues/1371#issuecomment-177606614 – Scarysize

@Scarysize官方使用像這樣：'svg.outerHtml'，我知道它的類型是字符串。所以，我使用jQuery將其切換到typeof'Node'並嘗試函數createSVGPoint：'$（svg.outerHtml）[0] .createSVGPoint'，結果是：'undefined' ----- :(我讀了相關的問題關於，核心問題也是[email protected]不支持SVG –

outerHTML和innerHTML總是返回字符串 – slebetman

感謝@Silysize的推進。
我找到https://github.com/svgdotjs/svg.js/issues/464#issuecomment-200551245
解決方案我在我的測試，helper.js一些作弊fllows測試（摩卡反應酶）貼裝元件之前：

// 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;

來源

2017-05-26 03:26:02

如果您使用svg.js，您可以嘗試使用svgdom，這是svg.js的僞命令 – Fuzzyma

回答

相關問題