必须用 setupfilesafterenv 阶段替换，因 jsdom 启动后 window.localstorage 已固化，测试中直接赋值无效；需在此阶段用 createstoragemock 创建可重置、触发 storage 事件的内存模拟对象。
前端测试中模拟 localStorage 和 sessionStorage，核心是用可控的内存对象替代原生 API，确保每个测试用例独立、可重置、能触发 storage 事件——不能靠直接赋值 global.localStorage，因为 JSDOM 已在环境启动时创建了真实实例，后续赋值无效。
为什么必须用 setupFilesAfterEnv 阶段替换
Jest 使用 JSDOM 模拟浏览器环境，window.localStorage 在环境初始化后就已存在。若在测试文件里写 global.localStorage = {} 或 jest.mock('localStorage')，实际读写仍走原生实现，状态会跨测试污染，storage 事件也不触发。唯一可靠方式是在 JSDOM 加载完成、测试运行前，通过 setupFilesAfterEnv 劫持 window 上的属性。
如何实现可重置 + 事件支持的 Mock
新建 tests/jest-setup-storage.js，内容如下：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
// 每次测试前自动清空，避免残留
const createStorageMock = () => {
let store = {};
return {
setItem(key, value) {
store[key] = String(value);
window.dispatchEvent(new StorageEvent('storage', { key, newValue: value }));
},
getItem(key) { return store[key] ?? null; },
removeItem(key) { delete store[key]; },
clear() { store = {}; },
key(index) { return Object.keys(store)[index] || null; },
get length() { return Object.keys(store).length; }
};
if (typeof window !== 'undefined') {
Object.defineProperty(window, 'localStorage', {
value: createStorageMock(),
writable: true,
configurable: true
});
Object.defineProperty(window, 'sessionStorage', {
value: createStorageMock(),
writable: true,
configurable: true
});
}
在 Jest 配置中启用该文件
确保 jest.config.js 包含：
module.exports = {
setupFilesAfterEnv: ['/tests/jest-setup-storage.js'],
testEnvironment: 'jsdom'
};
补充说明：开发调试阶段要不要 Mock？
开发时一般不需要手动 Mock Storage。JSDOM 默认已有基础实现，足够支撑页面运行；真正需要精确控制的是单元测试场景——比如验证登录态存取逻辑、检测 storage 事件监听是否生效、或模拟清空后的行为。若想在开发中临时覆盖（如强制设置 token），可直接在浏览器控制台操作 localStorage.setItem()，无需代码层干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
