JavaScript 中怎么测试本地缓存过期自动更新异步逻辑-js教程-PHP中文网

测试本地缓存过期自动更新需解耦时间依赖、模拟存储与网络、覆盖未过期/已过期/异步更新三类场景，确保逻辑可控可验。

javascript 中怎么测试本地缓存过期自动更新异步逻辑

测试本地缓存（如 localStorage 或 sessionStorage）的“过期自动更新”异步逻辑，核心在于**可控地模拟时间推进、触发缓存失效判断，并验证后续异步更新行为是否按预期执行**。纯前端无法真正“等待时间流逝”，所以必须解耦时间依赖、暴露内部状态、并用测试工具接管异步流程。

1. 把过期判断和更新逻辑分离并可注入

不要在业务代码里直接写 new Date().getTime() > expiryTime 这类硬编码时间检查。应将“当前时间”抽象为一个可替换的函数：

// ✅ 推荐：时间可注入
function shouldRefresh(cacheItem, now = Date.now) {
  return now() > (cacheItem.expiry || 0);
}
<p>function fetchAndCache(key, fetcher, now = Date.now) {
return fetcher().then(data => {
const expiry = now() + 5 <em> 60 </em> 1000; // 5分钟过期
localStorage.setItem(key, JSON.stringify({ data, expiry }));
return data;
});
}
</p>

测试时传入固定时间戳或 mock 时间函数，就能精准控制“是否过期”。

2. 模拟 localStorage 并拦截异步请求

避免真实读写 localStorage 和发网络请求。用 jest（或其他测试框架）mock：

用 jest.mock('localStorage', ...) 或直接在测试前覆盖 global.localStorage 为内存对象
用 jest.mock('fetch') 或 msw（Mock Service Worker） 拦截 API 调用，返回预设响应
确保被测函数返回 Promise，便于 await 或 return expect(...).resolves

3. 编写关键测试用例（Jest 示例）

覆盖三种典型场景：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

test('缓存未过期时直接返回本地数据', async () => {
  const key = 'user';
  const mockNow = jest.fn().mockReturnValue(1000);
  const cached = { data: { id: 1 }, expiry: 2000 }; // expiry > now → 未过期
  localStorage.setItem(key, JSON.stringify(cached));
<p>const result = await getFromCacheOrFetch(key, fetchUser, mockNow);</p><p>expect(result).toEqual(cached.data);
expect(fetchUser).not.toHaveBeenCalled(); // 不发起请求
});</p><p>test('缓存已过期时触发异步更新并返回新数据', async () => {
const key = 'user';
const mockNow = jest.fn().mockReturnValue(3000);
const cached = { data: { id: 1 }, expiry: 2000 }; // expiry </p><p>const result = await getFromCacheOrFetch(key, fetchUser, mockNow);</p><p>expect(result).toEqual(mockResponse);
expect(fetchUser).toHaveBeenCalledTimes(1);
expect(JSON.parse(localStorage.getItem(key)).data).toEqual(mockResponse);
});
</p>