Блог

Главная - Вопросы по программированию - d3.drag() вызывает ошибку при тестировании события mousedown через jsdom

d3.drag() вызывает ошибку при тестировании события mousedown через jsdom

#javascript #d3.js #jestjs #jsdom

#javascript #d3.js #jestjs #jsdom

Вопрос:

Добавление d3.drag() вызывает ошибку при тестировании события mousedown jest через jsdom среду in.

 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>

Ошибка:

     Error: Uncaught [TypeError: Cannot read property 'document' of null]
        at reportException (C:MyFilesworkspaced3-bugnode_modulesjsdomlibjsdomlivinghelpersruntime-script-errors.js:66:24)
        at invokeEventListeners (C:MyFilesworkspaced3-bugnode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:209:9)
        at SVGElementImpl._dispatch (C:MyFilesworkspaced3-bugnode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:119:9)
        at SVGElementImpl.dispatchEvent (C:MyFilesworkspaced3-bugnode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:82:17)
        at SVGElement.dispatchEvent (C:MyFilesworkspaced3-bugnode_modulesjsdomlibjsdomlivinggeneratedEventTarget.js:157:21)
        at C:MyFilesworkspaced3-bugnode_modules@testing-librarydomdistevents.js:25:20

Вот полный пример:
d3-bug.zip

Ответ №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>

Комментарии:

1. Это решило мою проблему. Знаете ли вы какой-либо ресурс или что-то, что объясняет события javascript?

2. Для ванильного JavaScript в целом я рекомендую MDN. Они более современные и более подробные, чем W3Schools. Кроме этого, боюсь, я не могу придумать ничего неожиданного

Метки: