如何在Jest中Mock window.crypto.getRandomValues？已尝试jest.spyOn无效

我之前也踩过这个坑！jest.spyOn没法mock window.crypto.getRandomValues，大多是因为这个属性是只读的，spyOn没法直接替换它。下面给你几个亲测有效的解决办法：

方法1：直接Mock整个window.crypto对象 #

最简单直接的方式就是替换掉整个window.crypto对象，避开只读属性的限制：

beforeEach(() => {
  // 先移除原有crypto对象（如果存在）
  delete window.crypto;
  // 手动创建mock版crypto，自定义getRandomValues的行为
  window.crypto = {
    getRandomValues: jest.fn((arr) => {
      // 这里可以返回测试需要的固定值，比如把数组填满1
      arr.fill(1);
      return arr;
    })
  };
});

afterEach(() => {
  // 测试结束后清理mock，避免影响其他测试用例
  jest.clearAllMocks();
  delete window.crypto;
});

这个方法的优势是逻辑简单，适合只需要mock getRandomValues的场景，不用关心其他crypto方法。

方法2：用Object.defineProperty修改只读属性 #

如果你想保留window.crypto的其他方法，只替换getRandomValues，可以用Object.defineProperty来修改只读属性：

beforeEach(() => {
  // 先保存原始方法，方便测试后恢复
  const originalGetRandomValues = window.crypto.getRandomValues;
  
  // 替换成mock函数
  Object.defineProperty(window.crypto, 'getRandomValues', {
    value: jest.fn((arr) => {
      // 自定义你的mock逻辑，比如生成固定范围的随机数
      for (let i = 0; i < arr.length; i++) {
        arr[i] = Math.floor(Math.random() * 256); // 或者固定值如0x00
      }
      return arr;
    }),
    writable: true // 允许后续修改，方便测试后恢复
  });

  // 测试完成后恢复原始方法
  afterEach(() => {
    Object.defineProperty(window.crypto, 'getRandomValues', {
      value: originalGetRandomValues,
      writable: false
    });
    jest.clearAllMocks();
  });
});

这个方法更灵活，适合需要保留window.crypto其他原生功能的场景。

方法3：针对Node环境的Mock（如果使用Jest默认环境） #

如果你的测试是在Node环境运行（而非浏览器环境），window对象可能不是原生的，这时候可以直接mock global.crypto：

// 在测试文件顶部或者beforeEach钩子中
global.crypto = {
  getRandomValues: jest.fn((arr) => arr.fill(0x12)) // 自定义返回值
};

// 测试后记得清理
afterEach(() => {
  jest.clearAllMocks();
  delete global.crypto;
});

额外注意事项 #

• 务必在afterEach中清理mock，避免测试用例之间互相污染
• 如果使用JSdom环境，确保JSdom版本支持window.crypto（旧版本可能没有内置这个对象）
• 如果你的代码中直接调用crypto.getRandomValues而非window.crypto.getRandomValues，记得mock global.crypto而不是window.crypto

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