Jasmine+Karma环境下mock window.location.protocol失败求助

window.location是浏览器内置的特殊对象，它的属性默认不可配置、不可重写，直接用spyOn系列方法会触发"Cannot redefine property: location"报错，以下是几种可行的解决办法：

方法一：修改location的属性描述符后mock #

先修改window.location的可配置性，再替换成自定义对象：

// 测试前置处理
const originalLocation = window.location;
beforeEach(() => {
  // 删除原location对象，重新定义为可写可配置
  delete window.location;
  window.location = {
    ...originalLocation,
    protocol: 'https:'
  };
});

// 测试后置恢复
afterEach(() => {
  window.location = originalLocation;
});

或者用Object.defineProperty更精准控制：

beforeEach(() => {
  Object.defineProperty(window, 'location', {
    writable: true,
    configurable: true,
    value: new URL('https://example.com')
  });
});

方法二：Jest专属mock方案 #

如果使用Jest测试框架，可以直接mock location的getter：

beforeEach(() => {
  jest.spyOn(window, 'location', 'get').mockReturnValue({
    protocol: 'https:',
    // 根据业务需求添加其他需要的location属性
    href: 'https://example.com',
    host: 'example.com'
  });
});

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

也可以直接替换global.location：

global.location = new URL('https://test.example.com');

方法三：封装业务逻辑（推荐长期方案） #

避免业务代码直接依赖window.location，封装成工具函数，测试时mock工具函数即可：

// 工具文件 utils.js
export const getCurrentProtocol = () => window.location.protocol;

// 业务代码
import { getCurrentProtocol } from './utils';
const protocol = getCurrentProtocol();
// 后续业务逻辑...

// 测试用例
import { getCurrentProtocol } from './utils';
jest.mock('./utils', () => ({
  getCurrentProtocol: jest.fn().mockReturnValue('https:')
}));

这种方式彻底隔离了浏览器内置对象的依赖，测试更灵活，也符合代码解耦的原则。

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