React / Jest -测试一个拖放组件

Question

我创建了一个简化的脚本来演示我的问题。

我有一个蓝色的组件，可以拖动到灰色组件。

我已经模拟了datattransfer对象，但是drop事件不包含数据。

测试失败:

expect(received). tobe (expected)//对象。平等是

预计:"test"收到:未定义的

codesandbox: https://codesandbox.io/s/dazzling-wood-dn63kx

我怎样才能通过考试?

App.js

import DraggableComponent from "./DraggableComponent";
import "./App.css";
function App() {
function dragOver(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
return (
<div className="container-fluid h-100">
<div className="row h-100">
<div
draggable={true}
id="drop-zone"
data-testid={"drop-zone"}
className="col-6 center-vh"
onDrop={(e) => drop(e)}
onDragOver={(e) => dragOver(e)}
></div>
<div className="col-6">
<DraggableComponent />
</div>
</div>
</div>
);
}
export default App;

DraggableComponent.js

function DraggableComponent() {
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
return (
<div
id="draggable-component"
className="center-vh"
draggable={true}
onDragStart={(e) => drag(e)}
data-testid="draggable-component"
>
Drag Me to the grey component
</div>
);
}
export default DraggableComponent;

App.test.js

import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";
test("Tests drag and drop of first component", () => {
render(<App />);

const data = "test";
const draggableElement = screen.getByTestId("draggable-component");
const droppableElement = screen.getByTestId("drop-zone");
// Simulate drag and drop action
fireEvent.dragStart(draggableElement, {
dataTransfer: { setData: data },
});
fireEvent.drop(droppableElement);
// Assert that the dataTransfer property of the drop event has the expected data
expect(droppableElement.dataTransfer).toBe(data);
// Assert that the droppable element has received the dropped data
expect(droppableElement).toHaveTextContent(data);
});

Answer 1

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Draggable from 'react-draggable';
describe('Draggable component', () => {
it('should move the element when dragged', () => {
const { getByTestId } = render(
<Draggable>
<div data-testid="test-element" />
</Draggable>
);
const element = getByTestId('test-element');
const initialPosition = element.style.transform;
expect(initialPosition).toBeFalsy();
const handle = getByTestId('test-element').querySelector('.react-draggable-handle');
const initialX = handle.style.left;
const initialY = handle.style.top;
// simulate dragging
fireEvent.mouseDown(handle, { clientX: 0, clientY: 0 });
fireEvent.mouseMove(handle, { clientX: 100, clientY: 100 });
fireEvent.mouseUp(handle);
const newPosition = element.style.transform;
expect(newPosition).toBeTruthy();
const newX = handle.style.left;
const newY = handle.style.top;
expect(newX).not.toBe(initialX);
expect(newY).not.toBe(initialY);
});
});

在这个例子中，我们使用了render, getbytestd, fireEvent。mouseDown fireEvent。和fireEvent。@test -library/react库中的mouseUp方法来模拟拖动。我们还使用data- tested属性在DOM中查找元素。最后的断言保持不变。