如何用Jest模拟jQuery的dataFunc函数测试Promise返回指定数据

我有一个调用jQuery函数的方法，该jQuery函数名为dataFunc，预期返回一个对象。我希望测试该方法返回的Promise，而非dataFunc函数本身，因此需要模拟dataFunc的响应。我希望执行const { data } = await service.auth( buttonData );时，data返回{ access_level: 0 }。请问该如何实现？

需要测试的带Promise的函数 #

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

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

    jQuery(buttonData).dataFunc({
      success,
      error,
    });
  });
  return myPromise;
}

当前的Jest测试代码 #

describe('service.test.js', () => {
  beforeEach(() => {
    global.jQuery = () => {
      return {
        dataFunc: jest.fn(() => ({access_level: 0})),
      };
    };
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('should do something', async () => {
    // Arrange
    const service = new Service();
    const approveButton = document.createElement('button');

    // Act
    const {data} = await service.auth(buttonData);
    console.log(data);
  });
});

你的测试代码核心问题是：当前模拟的dataFunc只是直接返回对象，但实际auth方法是通过回调函数接收数据的，不是直接拿dataFunc的返回值。所以必须让模拟的dataFunc主动调用传入的success回调，把期望的数据传递进去。

1. 修正jQuery的模拟逻辑 #

修改beforeEach中的dataFunc模拟，让它调用配置里的success方法：

beforeEach(() => {
  global.jQuery = () => {
    return {
      dataFunc: jest.fn((options) => {
        // 调用success回调，第一个参数是事件对象（这里传null即可），第二个是目标数据
        options.success(null, { access_level: 0 });
      }),
    };
  };
});

2. 完善测试用例 #

补全buttonData变量定义，并添加断言验证结果：

test('auth方法应返回包含access_level:0的data', async () => {
  // Arrange
  const service = new Service();
  const buttonData = document.createElement('button'); // 定义buttonData变量

  // Act
  const { data, error } = await service.auth(buttonData);

  // Assert
  expect(data).toEqual({ access_level: 0 });
  expect(error).toBeNull();
  // 可选：验证dataFunc是否被正确调用
  expect(jQuery(buttonData).dataFunc).toHaveBeenCalled();
});

3. 错误场景测试（可选） #

如果需要覆盖错误分支，可以单独编写测试用例，让dataFunc调用error回调：

test('auth方法在dataFunc出错时应返回错误信息', async () => {
  // 临时覆盖jQuery模拟，触发错误分支
  global.jQuery = () => {
    return {
      dataFunc: jest.fn((options) => {
        options.error();
      }),
    };
  };

  const service = new Service();
  const buttonData = document.createElement('button');

  const { data, error } = await service.auth(buttonData);

  expect(data).toBeNull();
  expect(error).toBe('Error');
});

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