如何用Jest测试jQuery dataFunc接收的参数属性？

测试目标 #

• buttonData：确认传入的是button元素而非其他类型元素
• url：验证该参数是可正常执行替换逻辑的函数（例如(url) => url.replace('##a##', 'sometext')）
• dimensions：验证该参数结构为{ width: 100, height: 200 }格式的对象

待测试函数 #

auth( buttonData, url, dimensions ){
  return new Promise((resolve, reject) => {
    const success = (e, data) => {
      resolve({data, error: null});
    };

    const error = () => {
      resolve({data: null, error: 'Error'});
    };

    jQuery(buttonData).dataFunc({
      success,
      error,
      url,
      dimensions 
    });
  });
}

当前尝试（存在错误） #

test( 'check that service receives the desired variables', async () => {
    const approveButton = document.createElement( 'button' );

// 此处mock方式错误，无法正确跟踪dataFunc的调用参数
global.jQuery = () => {
            return {
                dataFunc: ( { url, dimenssions } ) => {
                    url( jest.fn(), ( url ) => url.replace('##a##', 'sometext') );
                    dimenssions( jest.fn(), { width: 100, height: 200 } );
                },
            };
        };

    const service = await service.auth( approveButton, url, dimenssions );

    expect( service ).toHaveBeenCalledWith( approveButton, url, dimenssions );
} );

正确测试方向指引 #

1. 用Jest Mock跟踪调用
   不要直接给global.jQuery赋值普通函数，改用Jest的mock函数来捕获调用细节：

   // 创建dataFunc的mock，用于捕获传入的配置参数
   const mockDataFunc = jest.fn((options) => {
     // 手动触发success回调，让auth返回的Promise正常resolve
     options.success(null, {});
   });
   // 让jQuery返回包含mockDataFunc的对象
   global.jQuery = jest.fn(() => ({ dataFunc: mockDataFunc }));
   

2. 验证buttonData
   调用auth后，检查jQuery的调用参数是否为预期的button元素：

   expect(jQuery).toHaveBeenCalledWith(expect.any(HTMLButtonElement));
   // 或更精确匹配你创建的实例
   expect(jQuery).toHaveBeenCalledWith(approveButton);
   

3. 验证url函数
   从mockDataFunc捕获的配置中取出url函数，调用并验证其替换逻辑：

   const urlFunc = mockDataFunc.mock.calls[0][0].url;
   expect(urlFunc('https://test.com/##a##')).toBe('https://test.com/sometext');
   

4. 验证dimensions对象
   直接匹配dataFunc传入参数中的dimensions结构：

   expect(mockDataFunc.mock.calls[0][0].dimensions).toEqual({ width: 100, height: 200 });
   

内容的提问来源于stack exchange，提问作者DavSev