问题：当我运行我的代码时，SVG会附加到组件的外部div并完美呈现在页面上。但是，在测试期间，SVG不会附加到外部div。
Stack：我正在尝试使用Jest / Enzyme测试包含在React组件中的d3js元素。
到目前为止我做过的研究：在谷歌和stackoverflow上测试d3js上看了一堆指南/帖子。使用单元测试d3js和与Jasmine React的指南。我还读到使用Enzyme测试第三方库可能很困难，因此这可能是测试框架的限制。
我已经包含了一个基本的代码示例来测试。
零件：
import React from "react";
import * as d3 from "d3";
export default class Circle extends React.Component {
componentDidMount = () => {
return this.renderCircle();
}
renderCircle = () => {
d3.select("#outerDiv")
.append("svg")
.attr("width", 600)
.attr("height", 300)
.append("circle")
.attr("id", "d3-el")
.attr("cx", 300)
.attr("cy", 150)
.attr("r", 30)
.attr("fill", "#ff0000")
.on("click", function (d, i) {
var item = d3.select(this);
item.attr("fill", "#00ff00");
});
}
render() {
return <div id="outerDiv" />;
}
}
测试：
import React from "react";
import * as d3 from "d3";
const jsdom = require("jsdom");
const ReactJSDOM = require('react-jsdom');
const { JSDOM } = jsdom;
import Circle from "./Circle.js";
import { mount } from "enzyme";
import sinon from 'sinon';
describe("Circle", () => {
it("d3js element should be appended to outer div", () => {
let wrapper = mount(<Circle />);
let instance = wrapper.instance();
const jsdomElem = ReactJSDOM.render(<html><body><p><Circle /></p></body></html>);
console.log(jsdomElem.querySelector("#d3-el")); // returns null
console.log(wrapper.find("d3-ele").get(0));; // returns undefined
console.log(d3.select("d3-el")); // returns null
expect(wrapper.find("d3-el").exists()).toEqual(true);
}
}
对应该使用wrapper.find（），document.querySelector（）和d3.select（）进行渲染的d3元素进行查找都返回undefined或null。
我试过的东西，但没有将SVG元素附加到外部div：
这些方法都不起作用，如果我在外部div上查找，它不会显示div有任何子元素。在包装器上进行调试显示了同样的事情。
在测试过程中，我会非常乐意帮助将这个SVG附加到div中。任何解决方案或其他策略将不胜感激。如果您有任何疑问或我是否应该添加更多信息，请与我们联系。谢谢！
我之前遇到过与d3js和Jest类似的事情时遇到过这个问题。我正在执行d3.select(#id)，其中id已经在文档正文中呈现
barGraphContainer = document.createElement("div");
barGraphContainer.id = "testBar_d3";
barGraphContainer.setAttribute(
"style",
"width: 1024px; height: 400px;"
);
document.body.appendChild(barGraphContainer);
在jest.environment.setup.js中，我添加了以下内容以配合文档d3搜索和JSDom文档。
const JSDOM = require("jsdom").JSDOM;
const jsdom = new JSDOM(`<!doctype html><html lang="en"><body></body></html>`);
global.window = jsdom.window;
global.document = jsdom.window.document;