react-native-web测试中mock Window对象后无法恢复问题如何解决

你的测试失效主要有三个核心问题：

• 变量名不匹配：你原始业务逻辑判断的是大写开头的Window构造函数，第一个测试用例修改的也是global.Window，但第二个用例恢复的是小写的global.window，二者是完全独立的全局变量，自然恢复失败。
• 备份逻辑错误：你初始化备份时用{...global.Window}对Window做浅拷贝，如果初始时global.Window为undefined，你备份得到的是空对象，无法还原为原始值。
• 缺少全局状态自动重置机制：单测中修改全局变量后没有统一的恢复逻辑，很容易出现用例之间的状态污染。

以下是可行的两种实现方案：

方案1：手动维护全局变量备份 #

// 备份原始的全局Window值，不要做展开拷贝
const originalWindow = global.Window;

// 每个测试用例执行完成后自动恢复原始值
afterEach(() => {
  global.Window = originalWindow;
});

it('Should return ComponentB when Window is undefined', () => {
  global.Window = undefined;
  // 替换为你实际的业务逻辑调用，添加对应断言
  expect(yourRenderLogic()).toBe(ComponentB);
});

it('Should return ComponentA when Window exists', () => {
  // afterEach已经自动恢复了原始值，无需手动赋值
  expect(typeof global.Window).not.toBe('undefined');
  expect(yourRenderLogic()).toBe(ComponentA);
});

方案2：使用测试框架内置API（以Jest为例，更安全） #

用jest.spyOn劫持全局变量的访问，测试完成后自动重置，无需手动维护备份：

let windowSpy;
// 每个测试用例执行前劫持Window的getter
beforeEach(() => {
  windowSpy = jest.spyOn(global, 'Window', 'get');
});

// 每个测试用例执行后自动恢复原始值
afterEach(() => {
  windowSpy.mockRestore();
});

it('Should return ComponentB when Window is undefined', () => {
  windowSpy.mockReturnValue(undefined);
  expect(yourRenderLogic()).toBe(ComponentB);
});

it('Should return ComponentA when Window exists', () => {
  // 模拟Window正常存在的场景
  windowSpy.mockReturnValue(class Window {});
  expect(yourRenderLogic()).toBe(ComponentA);
});

额外注意事项 #

如果你的业务逻辑实际是要判断小写的全局窗口实例window而非Window构造函数，把上述代码中所有大写的Window替换为小写window即可。

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