Ken*_*Ken 6 jsdom d3.js reactjs jestjs enzyme
问题：当我运行我的代码时，SVG 附加到组件的外部 div 并在页面上完美呈现。但是，在测试期间，SVG 不会附加到外部 div。
堆栈：我正在尝试使用 Jest/Enzyme 测试包装在 React 组件中的 d3js 元素。
到目前为止我所做的研究：查找了一堆关于使用 google 和 stackoverflow 测试 d3js 的指南/帖子。使用了关于单元测试 d3js 和 React with Jasmine 的指南。我还读到，使用 Enzyme 测试 3rd 方库可能很困难，因此这可能是测试框架的限制。
我已经包含了一个基本的代码示例来测试。
成分：
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 的事情：
在组件上使用 mount()。
使用挂载组件的 instance() 并直接调用 renderCircle() 方法。
使用 ReactJSDOM 从上到下渲染整个 DOM。
一堆其他可能没有意义的东西，包括 sinon.spy() 和嘲笑 jest.fn()。
这些方法都不起作用，如果我在外部 div 上进行查找，它不会显示该 div 有任何子元素。在包装器上进行调试显示了同样的事情。
希望得到一些帮助，以便在测试期间将此 SVG 附加到 div 中。任何解决方案或其他策略将不胜感激。如果您有任何问题，或者我是否应该添加更多信息，请告诉我。谢谢！
Abh*_*Rao -1
早些时候，当我使用 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.jsd3 搜索文件和 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;
| 归档时间： |
|
| 查看次数： |
2299 次 |
| 最近记录： |