使用Jest / Enzyme進行React組件單元測試中的D3js

Question

問題：當我運行我的代碼時，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：

在組件上使用mount（）。
使用已安裝組件的instance（）並直接調用renderCircle（）方法。
使用ReactJSDOM從上到下渲染整個DOM。
一堆其他可能沒有意義的東西，包括sinon.spy（）和嘲笑jest.fn（）。

這些方法都不起作用，如果我在外部div上查找，它不會顯示div有任何子元素。 在包裝器上進行調試顯示了同樣的事情。

在測試過程中，我會非常樂意幫助將這個SVG附加到div中。 任何解決方案或其他策略將不勝感激。 如果您有任何疑問或我是否應該添加更多信息，請與我們聯系。 謝謝！

Answer 1

首先，您應該分離組件的問題。

將與d3相關的代碼移動到單獨的函數（或類）中，並像測試任何其他React組件一樣測試組件。

之后，測試D3相關的功能。 看看D3庫本身的測試，例如這里。 他們使用jsdom來模擬真實DOM的行為。

Answer 2

我之前遇到過與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;

使用Jest / Enzyme進行React組件單元測試中的D3js

問題描述

2 個解決方案

解決方案1
0 2019-08-28 12:11:17

解決方案2
-1 2019-03-12 19:22:36

使用Jest / Enzyme進行React組件單元測試中的D3js

問題描述

2 個解決方案

解決方案1 0 2019-08-28 12:11:17

解決方案2 -1 2019-03-12 19:22:36

解決方案1
0 2019-08-28 12:11:17

解決方案2
-1 2019-03-12 19:22:36