Enzyme: Dragging a Div

Question

I am using enzyme to test @tanstack/react-table

I want to test that when the resizer div is moved, the width of the column should be updated.

        const draggableDiv = this.wrapper.find("table thead th .resizer").at(index);
        const divNode = draggableDiv.getDOMNode();
        const { left, top } = divNode.getBoundingClientRect();
        const clientX = left;
        const clientY = top;
        divNode.dispatchEvent(new MouseEvent("mousedown", { clientX, clientY }));
        divNode.dispatchEvent(new MouseEvent("mousemove",  { clientX: clientX + width, clientY }))
        divNode.dispatchEvent(new MouseEvent("mouseup"));

The problem is { left, top } are always 0 and dispatchEvents are not working.

Here's the code

<th
                    key={header.id}
                    style={{ minWidth: header.getSize(), width: header.getSize() }} // Added this line for sizing
                  >
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
                    <div
                      {...{
                        onMouseDown: header.getResizeHandler(),
                        onTouchStart: header.getResizeHandler(),
                        className: `resizer ${
                          header.column.getIsResizing() ? 'isResizing' : ''
                        }`
                      }}
                    />
                  </th>