React Testing（Jest）内存占用过高及代码复用优化咨询

1. 确保前一个测试完全清除内存的afterEach操作 #

要避免测试间状态污染导致流水线挂起，afterEach中可加入以下针对性清理操作：

• 卸载根组件：如果用React Testing Library这类工具，调用render.unmount()彻底移除App实例，清除DOM关联的事件监听与内存引用；其他框架同理，调用对应组件销毁/卸载方法。
• 清除浏览器存储：清空localStorage、sessionStorage；若测试用到Cookie，可遍历document.cookie删除所有条目。
• 终止异步任务：用AbortController的abort()取消未完成的API请求，调用clearTimeout/clearInterval清除定时器/间隔任务；如果用了Jest假定时器，执行jest.runAllTimers()+jest.useRealTimers()重置。
• 重置状态管理工具：若用Redux、MobX等状态库，在afterEach里将store重置为初始状态，避免跨测试的状态残留。
• 重置模拟依赖：用MSW的话调用server.resetHandlers()重置请求处理，或server.close()关闭模拟服务；对Jest模拟的函数，执行jest.clearAllMocks()清除调用记录。

2. 提取通用代码提升可读性 #

完全可以把重复的「渲染App→登录→等待加载」逻辑封装成通用方法，减少冗余代码的同时让测试用例更清晰。

示例实现（以Jest+React Testing Library为例） #

先封装通用测试前置函数：

// 定义在测试工具文件或当前测试文件顶部
async function setupTestEnvironment() {
  // 渲染App组件
  render(<App />);
  
  // 执行登录流程
  const usernameInput = await screen.findByLabelText('用户名');
  const passwordInput = await screen.findByLabelText('密码');
  const loginBtn = await screen.findByRole('button', { name: '登录' });
  
  await userEvent.type(usernameInput, 'test-account');
  await userEvent.type(passwordInput, 'test-password');
  await userEvent.click(loginBtn);
  
  // 等待页面加载完成（以首页标题出现为标志）
  await screen.findByRole('heading', { name: '首页' });
}

再在各测试用例中直接调用：

test('验证用户信息展示', async () => {
  await setupTestEnvironment();
  
  // 执行当前测试的特定逻辑
  const userInfo = await screen.findByText('test-account');
  expect(userInfo).toBeInTheDocument();
});

test('测试导航菜单跳转', async () => {
  await setupTestEnvironment();
  
  // 执行当前测试的特定逻辑
  await userEvent.click(await screen.findByRole('link', { name: '设置' }));
  expect(await screen.findByRole('heading', { name: '设置' })).toBeInTheDocument();
});

还可把通用清理逻辑统一放在全局afterEach中：

afterEach(() => {
  // 卸载组件
  render.unmount();
  // 清除存储
  localStorage.clear();
  sessionStorage.clear();
  // 重置模拟函数
  jest.clearAllMocks();
});

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