d3.drag() 在通过 jsdom 测试 mousedown 事件时导致错误

Question

jest添加 d3.drag() 会导致在环境中测试 mousedown 事件时出错jsdom。

function App() {

    const array = [1];

    React.useEffect(() => {

        d3.select(".App")

            .style("outline", "none")

            .append("svg")

            .attr("width", "400px")

            .attr("height", "500px");

        d3.select('svg')

            .selectAll('g')

            .data(array)

            .join(

                enter => {

                    return enter

                        .append('text')

                        .attr('x', 100)

                        .attr('y', 100)

                        .attr('fill', '#000')

                        .text('hello');

                }

            )

            .call(d3.drag().on("start", () => {

                console.log("dragStart");

            }));

    }, []);

    return (

        <div className="App">

        </div>

    );

}

const wrapper = TestingLibraryReact.render(<App/>);

const circle = wrapper.container.querySelector('svg').querySelector("text");

TestingLibraryReact.fireEvent.mouseDown(circle);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom-test-utils.development.js"></script>

<script src="https://unpkg.com/@testing-library/react@11.2.2/dist/@testing-library/react.umd.js"></script>

Answer 1

当您使用 d3 的非缩小版本时出现的错误是view is undefined。这是因为 d3 期望view存在一些自定义属性，您无法通过测试库添加这些属性，因为它不在策划事件列表中。但是，如果您愿意，您可以在此使用普通 JavaScript ：function App() {    const array = [1];    React.useEffect(() => {        d3.select(".App")            .style("outline", "none")            .append("svg")            .attr("width", "400px")            .attr("height", "500px");        d3.select('svg')            .selectAll('g')            .data(array)            .join(                enter => {                    return enter                        .append('text')                        .attr('x', 100)                        .attr('y', 100)                        .attr('fill', '#000')                        .text('hello');                }            )            .call(d3.drag().on("start", () => {                console.log("dragStart");            }));    }, []);    return (        <div className="App">        </div>    );}const wrapper = TestingLibraryReact.render(<App/>);const circle = wrapper.container.querySelector('svg').querySelector("text");circle.dispatchEvent(new MouseEvent("mousedown", {  view: window,}));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom-test-utils.development.js"></script><script src="https://unpkg.com/@testing-library/react@11.2.2/dist/@testing-library/react.umd.js"></script>