如何使用Jest仅Mock window对象的单个属性？

首先，你遇到的问题根源确实是替换了整个window对象——React在渲染过程中会依赖window的很多内置属性（比如document、navigator、performance等），你的mock对象只包含了location.href，其他属性都是undefined，这就导致React内部的类型检查（比如instanceof判断）失败，抛出了你看到的错误。

下面是几种正确的仅Mock单个属性的方案，以及其他可能的诱因和解决思路：

方案1：Mock window.location.href的Getter #

你不需要替换整个window，只需要修改location.href的getter方法即可，这样能保留window的其他原生属性：

// 保存原始的href getter，方便测试后恢复
const originalHrefGetter = Object.getOwnPropertyDescriptor(window.location, 'href').get;

beforeAll(() => {
  // 重新定义href的getter，返回我们需要的mock值
  Object.defineProperty(window.location, 'href', {
    get: () => 'https://stackoverflow.com/questions',
    configurable: true, // 允许后续修改或恢复原始配置
  });
});

afterAll(() => {
  // 测试结束后恢复原始的href getter，避免影响其他测试
  Object.defineProperty(window.location, 'href', {
    get: originalHrefGetter,
    configurable: true,
  });
});

test('your component test logic', () => {
  const wrapper = mount(<MyComponent />);
  // ...编写你的测试断言
});

方案2：用jest.spyOn直接Mock单个属性 #

如果你的jest版本支持，也可以用spyOn直接针对location.href的getter进行mock：

test('your component test', () => {
  // 注意：location.href是只读属性，需要指定第三个参数'get'来mock它的getter
  const mockHref = jest.spyOn(window.location, 'href', 'get').mockReturnValue('https://stackoverflow.com/questions');
  
  const wrapper = mount(<MyComponent />);
  // ...你的测试逻辑

  // 测试完成后恢复原始属性
  mockHref.mockRestore();
});

其他可能的诱因排查 #

除了替换整个window对象，还有几个可能导致这个错误的点：

• Mock时机太晚：如果你的组件在导入阶段就立即访问了window.location.href（比如组件外部的变量初始化），你的mock可能在组件导入之后才执行，导致初始访问到的是真实值或undefined。解决办法是在导入组件前就完成mock。
• 其他测试的残留Mock：如果其他测试没有正确恢复window对象，残留的mock可能会影响当前测试。可以在beforeEach或afterEach中重置所有mock状态。
• 组件依赖其他window属性：如果你的组件本身除了location.href还依赖其他window属性（比如window.navigator.userAgent），即使你没替换整个window，这些属性的异常也可能导致渲染错误。可以检查组件代码，确认是否有其他window相关的调用。

更优雅的替代方案 #

如果你的组件是通过window.location.href实现跳转逻辑，不妨把跳转逻辑封装成单独的工具函数，然后Mock这个函数而非直接Mock window：

// utils/navigation.js
export const navigateTo = (url) => {
  window.location.href = url;
};

// MyComponent.js
import { navigateTo } from './utils/navigation';

const MyComponent = () => {
  const handleClick = () => {
    navigateTo('https://example.com');
  };
  return <button onClick={handleClick}>Go</button>;
};

// 测试文件
import { navigateTo } from './utils/navigation';

jest.mock('./utils/navigation', () => ({
  navigateTo: jest.fn(),
}));

test('click triggers navigation', () => {
  const wrapper = mount(<MyComponent />);
  wrapper.find('button').simulate('click');
  expect(navigateTo).toHaveBeenCalledWith('https://example.com');
});

这种方式更符合测试的最佳实践——测试组件的行为而非依赖的全局对象，同时避免了直接Mock window带来的各种兼容性问题。

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