只是在 TypeScript 中进行单元测试：使用带有自定义句柄的 jQuery UI 小部件使元素可调整大小

问：

我的函数接受两个参数。第一个参数是 jQuery 对象本身。第二个参数是 HTMLElement。

该函数的目的是通过应用 jQuery-UI Resizable Widget 向元素添加可调整大小的功能，并添加提供自定义句柄的选项。这是按预期工作的函数，

const addResizableAndCustomHandleToCustomSelectScrollBars = (
  $: JQueryStatic,
  selectScrollbarsElement: JQuery<HTMLElement>,
  handleId: string
) => {
  // Create handle and attach it to the given element
  const customHandle: HTMLElement = document.createElement("div");
  selectScrollbarsElement.append(customHandle!);

  // add the classes required for the handle by jQueryUI
  customHandle.setAttribute(
    "class",
    "ui-resizable-handle ui-resizable-s ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"
  );
  customHandle.setAttribute("id", handleId);
  // Wrap the element in a jQuery object...
  const selectScrollJQueryUIObject: JQuery<HTMLElement> = $(
    selectScrollbarsElement
  );
  //and add the Resizable widget with the custom handle created earlier
  selectScrollJQueryUIObject.resizable({
    handles: { s: $(customHandle) },
  });

  // Configure style to put icon in the proper bottom right position of the element.
  customHandle!.setAttribute(
    "style",
    "z-index: 90; left: unset; cursor: s-resize;"
  );
};

这是我的单元测试：

import {
  describe,
  afterEach,
  expect,
  it,
  beforeEach,
  jest,
} from "@jest/globals";
import { addResizableAndCustomHandleToCustomSelectScrollBars } from "../../src/utils/utils";
import $ from "jquery";

describe("addResizableAndCustomHandleToCustomSelectScrollBars", () => {
  let selectScrollbarsElement: HTMLElement;
  // let customHandle: HTMLElement;
  let resizableSpy: any;
  let selectScrollBarJQueryObject: JQuery<HTMLElement>;
  beforeEach(() => {
    // Create and configure the necessary DOM elements
    selectScrollbarsElement = document.createElement("div");
    selectScrollBarJQueryObject = $(selectScrollbarsElement);
    // customHandle = document.createElement("div");

    // Spy on the jQuery resizable function
    resizableSpy = jest.spyOn(selectScrollBarJQueryObject, "resizable");

    // Append the elements to the document
    document.body.appendChild(selectScrollbarsElement);
    // document.body.appendChild(customHandle);
  });

  afterEach(() => {
    // Clean up the DOM and reset spies after each test
    document.body.removeChild(selectScrollbarsElement);
    // document.body.removeChild(customHandle);
    resizableSpy.mockRestore();
  });

  it("should add resizable widget with custom handle", () => {
    // Call the function to be tested
    addResizableAndCustomHandleToCustomSelectScrollBars(
      $,
      $(selectScrollbarsElement),
      "customId"
    );
    const customHandle = $("customId")[0] as HTMLElement;
    // Assert that the custom handle was added to the element
    expect(selectScrollbarsElement.contains(customHandle)).toBe(true);

    // Assert that the jQuery resizable function was called with the expected arguments
    expect(resizableSpy).toHaveBeenCalledWith({
      handles: { s: $(customHandle) },
    });

    // Assert that the custom handle has the required classes
    expect(customHandle.classList).toContain("ui-resizable-handle");
    expect(customHandle.classList).toContain("ui-resizable-s");
    expect(customHandle.classList).toContain("ui-resizable-se");
    expect(customHandle.classList).toContain("ui-icon");
    expect(customHandle.classList).toContain("ui-icon-gripsmall-diagonal-se");
  });
});

事实上，我已经用多种方式编写了这个单元测试，但仍然面临类似的错误：

**Property `resizable` does not exist in the provided object**

      25 |
      26 |     // Spy on the jQuery resizable function
    > 27 |     resizableSpy = jest.spyOn(selectScrollBarJQueryObject, "resizable");

JQuery 对象具有一个名为 resizable 的对象方法。从技术上讲，它不是一个函数。但它确实返回了一个函数。

我尝试了几种不同的方式编写测试，但遇到了类似的错误，有人说 .resizable 不是一个函数。

希望得到任何帮助，使这个单元测试正常工作。