JavaScript 中怎么在前端单元测试中 Mock 本地存储和 Cookie 对象-js教程-PHP中文网

前端单元测试中 mock localstorage 和 document.cookie 的核心是替换或拦截浏览器原生 api 行为，需完整模拟方法并维护内存状态，且须在 beforeeach 重置、aftereach 清空以避免污染。

javascript 中怎么在前端单元测试中 mock 本地存储和 cookie 对象

在前端单元测试中 Mock localStorage 和 document.cookie，核心是**替换或拦截浏览器原生 API 的行为**，使其可控、可断言、不依赖真实环境。下面分两部分说明常用且可靠的做法。

Mock localStorage

localStorage 是全局对象，测试前需手动模拟其方法（setItem、getItem、removeItem、clear），并维护一个内存中的键值对映射。推荐在每个测试用例前重置状态，避免污染。

使用 Jest 时，可在 beforeEach 中定义 mock：

const localStorageMock = {
  store: {},
  getItem(key) { return this.store[key] ?? null; },
  setItem(key, value) { this.store[key] = String(value); },
  removeItem(key) { delete this.store[key]; },
  clear() { this.store = {}; }
};

beforeEach(() => {
  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
});

若使用 Vitest，可用 vi.stubGlobal 或直接赋值：window.localStorage = localStorageMock；
注意：不能只 mock 单个方法（如只 mock setItem），否则其他方法仍调用原生实现，可能报错或行为不一致。

Mock document.cookie

document.cookie 是一个特殊的 getter/setter 属性，不能直接赋值覆盖。必须通过 Object.defineProperty 拦截读写行为，并自行维护 cookie 字符串。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

基础 mock 示例（支持简单 key=value 格式）：

const cookieStore = {};

const mockCookieDescriptor = {
  get() { return Object.entries(cookieStore)
      .map(([k, v]) => `${k}=${v}`)
      .join('; '); },
  set(str) {
    str.split(';').forEach(pair => {
      const [key, ...rest] = pair.trim().split('=');
      if (key) cookieStore[key] = rest.join('=');
    });
  }
};

beforeEach(() => {
  Object.defineProperty(document, 'cookie', mockCookieDescriptor);
});

该 mock 支持基本的读写，但不处理过期时间、路径、域名等属性——单元测试中通常无需模拟这些细节；
如需更完整行为（如自动清除过期 cookie），可引入轻量库如 jsdom-cookies（仅限 jsdom 环境）；
务必在 afterEach 清空 cookieStore，防止测试间干扰。

实际测试中注意事项

Mock 后要验证逻辑是否按预期调用存储 API，而不是只检查结果状态。

用 jest.fn() 包装 setItem 或 cookie setter，然后用 expect(fn).toHaveBeenCalledWith(...) 断言调用参数；
避免在测试中直接访问 window.localStorage 或 document.cookie 做断言——应通过被测函数的副作用来间接验证；
若使用类库封装了存储操作（如 StorageService），优先 mock 该服务本身，而非底层 API，更符合测试隔离原则。