SVGGElement( MDN ๋ฌธ์ )๊ฐ jsdom์์ ์ง์๋์ง ์๋ ๊ฒ ๊ฐ์ต๋๊น?
const { JSDOM } = require("jsdom");
const options = {
... your options here ...
};
const dom = new JSDOM(`
<svg>
<g id="g">
</svg>
`, options);
const g = dom.window.document.querySelector("#g");
if (g instanceof SVGGElement) { // throws "SVGGElement is not defined"
console.log("ok");
}
https://jsfiddle.net/p3ag4v85/
(์ฝ์์์ ํ์ธํ๊ณ ok
์ฐพ์ต๋๋ค)
๋ด๋ถ์ ์ผ๋ก jsdom์ ์ฌ์ฉํ๋ Jest๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ํ ์คํธํ ๋ ๋ฒ๊ทธ๋ฅผ ๋ฐ๊ฒฌํ๋ค๊ณ ๋งํด์ผ ํฉ๋๋ค. ๋ค์์ ๋ด๊ฐ ์ป์ ์ค๋ฅ์ ๋๋ค.
โ should throw an Error if g element is not found
expect(received).toThrowError(expected)
Expected message: "group element not found"
Received message: "SVGGElement is not defined"
46 | if (!(svgElement instanceof SVGSVGElement))
47 | throw new Error("svg element not found");
> 48 | if (!(groupElement instanceof SVGGElement))
| ^
49 | throw new Error("g element not found");
50 | this.groupElement = groupElement;
51 | this.groupBBoxWidth = 0;
at new Lib (lib/js/index.js:48:39)
at test/MyLib/constructor.test.js:86:15
at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:81:11)
at Object.toThrowError (node_modules/expect/build/index.js:342:33)
at Object.<anonymous> (test/MyLib/constructor.test.js:87:7)
85 | expect(
86 | () => new Lib({ svgIdentifier: "svg", groupIdentifier: "g" })
> 87 | ).toThrowError(new TypeError("group element not found"));
| ^
88 | });
89 |
at Object.<anonymous> (test/MyLib/constructor.test.js:87:7)
SVGElement
๊ฐ ์ง์๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ทํ์ ์ฝ๋๋ Node.js ์ ์ญ์์ SVGElement
๋ฅผ ์ฐพ๊ณ ์์ต๋๋ค. dom.window.SVGElement
๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
๋ค. ์ด๊ฒ์ ์ค์ ๋ก ๋ฒ๊ทธ์ ๋๋ค. ์ฌ์์ด SVG ๊ทธ๋ฃน์ ๋ํด ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌํ๋์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค.
<!DOCTYPE html>
<html>
<body>
<svg id="svg">
<g id="group"></g>
</svg>
<script>
"use strict";
window.addEventListener("load", function() {
const svg = document.getElementById("svg");
const group = document.getElementById("group");
console.dir(svg.constructor); // ฦ SVGSVGElement()
console.dir(group.constructor); // ฦ SVGGElement()
});
</script>
</body>
</html>
"use strict";
const { JSDOM } = require("jsdom");
const dom = new JSDOM(`
<svg id="svg">
<g id="group"></g>
</svg>
`);
const svg = dom.window.document.getElementById("svg");
const group = dom.window.document.getElementById("group");
console.log(svg.constructor); // [Function: SVGSVGElement]
console.log(group.constructor); // [Function: SVGElement]
์ค์ ๋ก SVG g
์์๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ด๋ ๊ฒ ๋ณด์
๋๋ค. ํ์ฌ SVG ์ง์์ ๊ทธ๋ค์ง ์ข์ง ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ค์ ๋ก SVG
g
์์๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ด๋ ๊ฒ ๋ณด์ ๋๋ค. ํ์ฌ SVG ์ง์์ ๊ทธ๋ค์ง ์ข์ง ์์ต๋๋ค.