TypeScript测试中模拟浏览器环境的技术方案问询

嘿，我太懂你这种折腾的滋味了——在Node环境测浏览器端的TypeScript代码，光是模拟window那些API就够头疼的，尤其是location这种全局属性，要么报找不到名称的错，要么声明了接口却没法存根实例。我来分享几个亲测好用的简洁方案：

方案1：手动模拟全局window与location（适合简单场景） #

你之前只声明接口不行，得创建可操作的实例并挂载到全局。在测试文件里这么写：

首先扩展TypeScript的全局类型，让它识别我们要模拟的属性：

declare global {
  interface Window {
    location: Location;
  }
}

接着创建可存根的location实例，同时把window和location都挂载到Node的全局对象上（因为浏览器里location是window.location的别名）：

// 初始化一个带mock方法的location实例
const mockLocation = {
  href: 'https://example.com',
  pathname: '/test',
  replace: jest.fn(),
  assign: jest.fn()
  // 按需添加你业务代码用到的其他location属性/方法
} as Location;

// 挂载全局window和location
global.window = { location: mockLocation } as Window;
global.location = mockLocation;

测试时就能直接存根和断言了：

test('测试location.replace的调用逻辑', () => {
  // 调用你的业务函数
  yourBrowserCodeThatUsesLocation();
  
  // 断言方法被正确调用
  expect(global.location.replace).toHaveBeenCalledWith('/new-target');
});

记得测试后重置mock，避免污染其他测试：

afterEach(() => {
  jest.clearAllMocks();
  // 必要的话重置属性值
  global.location.href = 'https://example.com';
});

方案2：用jsdom一键模拟完整浏览器环境（适合复杂场景） #

如果需要模拟的浏览器API不止location，手动写太繁琐，用jsdom可以直接生成一个完整的浏览器环境模拟。

先安装依赖：

npm install --save-dev jsdom @types/jsdom

然后在Jest的配置文件（比如jest.setup.ts）里初始化jsdom：

import { JSDOM } from 'jsdom';

// 创建一个模拟的DOM环境，同时指定初始URL
const dom = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'https://your-app.com'
});

// 把浏览器全局对象挂载到Node全局
global.window = dom.window;
global.document = dom.window.document;
global.location = dom.window.location;
// 其他需要的浏览器对象（比如navigator、history）也可以从dom.window上取

之后你的测试就能直接使用原生风格的location对象了，还能轻松mock方法：

test('测试路径跳转逻辑', () => {
  // 修改真实的location属性
  global.location.href = 'https://your-app.com/test-page';
  expect(global.location.pathname).toBe('/test-page');
  
  // spy并mock replace方法
  const replaceSpy = jest.spyOn(global.location, 'replace').mockImplementation(() => {});
  yourNavigationFunction();
  expect(replaceSpy).toHaveBeenCalledWith('/home');
});

方案3：TypeScript类型报错的小修复 #

如果模拟后还是报类型错误，检查下你的tsconfig.json，确保编译器能识别浏览器类型：

{
  "compilerOptions": {
    "types": ["jest", "dom"] // 加入dom类型，让TS识别window、location等全局对象
  }
}

或者在单个测试文件顶部添加类型引用：

/// <reference types="dom" />

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