如何用Jest模拟navigator.userAgentData.getHighEntropyValues的异步返回值？

我希望在测试中模拟navigator.userAgentData.getHighEntropyValues的resolved值为一个示例对象，请问该如何实现？

我尝试了以下代码：

beforeEach(() => {
  jest.mock(global.navigator.userAgentData);
});
it('uaFullVersion is defined', async () => {
   global.navigator.userAgentData.getHighEntropyValues.mockResolvedValueOnce({uaFullVersion: '1.2.3'});
   const hev = await myFunc();
   expect(hev.uaFullVersion).toBeDefined();
});

myFunc代码如下：

async function myFunc() {
  const hev = await navigator.userAgentData.getHighEntropyValues(["uaFullVersion"]);
  return hev;
}

但运行时出现错误：
TypeError: Cannot read properties of undefined (reading 'getHighEntropyValues')

解决方法 #

你用错了jest.mock的用法，这个API是用来模拟整个模块的，不能直接mock浏览器内置的navigator.userAgentData属性。正确的做法是手动构建mock对象并挂载到全局navigator上：

基础实现 #

beforeEach(() => {
  // 保留原有navigator的其他属性，仅添加/覆盖userAgentData
  global.navigator = {
    ...global.navigator,
    userAgentData: {
      getHighEntropyValues: jest.fn().mockResolvedValue({ uaFullVersion: '1.2.3' })
    }
  };
});

it('uaFullVersion is defined', async () => {
  const hev = await myFunc();
  expect(hev.uaFullVersion).toBeDefined();
  // 可选：验证方法是否被传入正确参数调用
  expect(global.navigator.userAgentData.getHighEntropyValues).toHaveBeenCalledWith(["uaFullVersion"]);
});

单个测试用例覆盖返回值 #

如果需要在特定测试中返回不同的值，可以使用mockResolvedValueOnce：

it('returns custom uaFullVersion', async () => {
  global.navigator.userAgentData.getHighEntropyValues.mockResolvedValueOnce({ uaFullVersion: '4.5.6' });
  const hev = await myFunc();
  expect(hev.uaFullVersion).toBe('4.5.6');
});

测试后清理 #

为了避免mock影响其他测试用例，建议在每个测试后清理：

afterEach(() => {
  // 删除mock的userAgentData属性
  delete global.navigator.userAgentData;
  // 重置所有mock函数
  jest.restoreAllMocks();
});

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