vf_react/docs/TEST_GUIDE.md

崩溃修复测试指南

测试时间：2025-10-14 测试范围：SignInIllustration.js + SignUpIllustration.js 服务器地址：http://localhost:3000

---

🎯 测试目标

验证以下修复是否有效：

• ✅ 响应对象崩溃（6处）
• ✅ 组件卸载后 setState（6处）
• ✅ 定时器内存泄漏（2处）

---

📋 测试清单

✅ 关键测试（必做）

1. 网络异常测试 - 验证响应对象修复

登录页面 - 发送验证码

测试步骤：
1. 打开 http://localhost:3000/auth/sign-in
2. 切换到"验证码登录"模式
3. 输入手机号：13800138000
4. 打开浏览器开发者工具 (F12) → Network 标签
5. 点击 Offline 模拟断网
6. 点击"发送验证码"按钮

预期结果：
✅ 显示错误提示："发送验证码失败 - 网络请求失败，请检查网络连接"
✅ 页面不崩溃
✅ 无 JavaScript 错误

修复前：
❌ 页面白屏崩溃
❌ Console 报错：Cannot read property 'json' of null

登录页面 - 微信登录

测试步骤：
1. 在登录页面，保持断网状态
2. 点击"扫码登录"按钮

预期结果：
✅ 显示错误提示："获取微信授权失败 - 网络请求失败，请检查网络连接"
✅ 页面不崩溃
✅ 无 JavaScript 错误

注册页面 - 发送验证码

测试步骤：
1. 打开 http://localhost:3000/auth/sign-up
2. 切换到"验证码注册"模式
3. 输入手机号：13800138000
4. 保持断网状态
5. 点击"发送验证码"按钮

预期结果：
✅ 显示错误提示："发送失败 - 网络请求失败..."
✅ 页面不崩溃

---

2. 组件卸载测试 - 验证内存泄漏修复

倒计时中离开页面

测试步骤：
1. 恢复网络连接
2. 在登录页面输入手机号并发送验证码
3. 等待倒计时开始（60秒倒计时）
4. 立即点击浏览器后退按钮或切换到其他页面
5. 打开 Console 查看是否有警告

预期结果：
✅ 无警告："Can't perform a React state update on an unmounted component"
✅ 倒计时定时器正确清理
✅ 无内存泄漏

修复前：
❌ Console 警告：Memory leak warning
❌ setState 在组件卸载后仍被调用

请求进行中离开页面

测试步骤：
1. 在注册页面填写完整信息
2. 点击"注册"按钮
3. 在请求响应前（loading 状态）快速刷新页面或关闭标签页
4. 打开新标签页查看 Console

预期结果：
✅ 无崩溃
✅ 无警告信息
✅ 请求被正确取消或忽略

注册成功跳转前离开

测试步骤：
1. 完成注册提交
2. 在显示"注册成功"提示后
3. 立即关闭标签页（不等待2秒自动跳转）

预期结果：
✅ 无警告
✅ navigate 不会在组件卸载后执行

---

3. 边界情况测试 - 验证数据完整性检查

后端返回空响应

测试步骤（需要模拟后端）：
1. 使用 Chrome DevTools → Network → 右键请求 → Edit and Resend
2. 修改响应为空对象 {}
3. 观察页面反应

预期结果：
✅ 显示错误："服务器响应为空"
✅ 不会尝试访问 undefined 属性
✅ 页面不崩溃

后端返回 500 错误

测试步骤：
1. 在登录页面点击"扫码登录"
2. 如果后端返回 500 错误

预期结果：
✅ 显示错误："获取二维码失败：HTTP 500"
✅ 页面不崩溃

---

🧪 进阶测试（推荐）

4. 弱网环境测试

慢速网络模拟

测试步骤：
1. Chrome DevTools → Network → Throttling → Slow 3G
2. 尝试发送验证码
3. 等待 10 秒（超时时间）

预期结果：
✅ 10秒后显示超时错误
✅ 不会无限等待
✅ 用户可以重试

丢包模拟

测试步骤：
1. 使用 Chrome DevTools 模拟丢包
2. 连续点击"发送验证码"多次

预期结果：
✅ 每次请求都有适当的错误提示
✅ 不会因为并发请求而崩溃
✅ 按钮在请求期间正确禁用

---

5. 定时器清理测试

倒计时清理验证

测试步骤：
1. 在登录页面发送验证码
2. 等待倒计时到 50 秒
3. 快速切换到注册页面
4. 再切换回登录页面
5. 观察倒计时是否重置

预期结果：
✅ 定时器在页面切换时正确清理
✅ 返回登录页面时倒计时重新开始（如果再次发送）
✅ 没有多个定时器同时运行

---

6. 并发请求测试

快速连续点击

测试步骤：
1. 在登录页面输入手机号
2. 快速连续点击"发送验证码"按钮 5 次

预期结果：
✅ 只发送一次请求（按钮在请求期间禁用）
✅ 不会因为并发而崩溃
✅ 正确显示 loading 状态

---

🔍 监控指标

Console 检查清单

在测试过程中，打开 Console (F12) 监控以下内容：

✅ 无红色错误（Error）
✅ 无内存泄漏警告（Memory leak warning）
✅ 无 setState 警告（Can't perform a React state update...）
✅ 无 undefined 访问错误（Cannot read property of undefined）

Network 检查清单

打开 Network 标签监控：

✅ 请求超时时间：10秒
✅ 失败请求有正确的错误处理
✅ 没有重复的请求
✅ 请求被正确取消（如果页面卸载）

Performance 检查清单

打开 Performance 标签（可选）：

✅ 无内存泄漏（Memory 不会持续增长）
✅ 定时器正确清理（Timer count 正确）
✅ EventListener 正确清理

---

📊 测试记录表

请在测试时填写以下表格：

测试项	状态	问题描述	截图
登录页 - 断网发送验证码	⬜ 通过 / ⬜ 失败
登录页 - 断网微信登录	⬜ 通过 / ⬜ 失败
注册页 - 断网发送验证码	⬜ 通过 / ⬜ 失败
倒计时中离开页面	⬜ 通过 / ⬜ 失败
请求进行中离开页面	⬜ 通过 / ⬜ 失败
注册成功跳转前离开	⬜ 通过 / ⬜ 失败
后端返回空响应	⬜ 通过 / ⬜ 失败
慢速网络超时	⬜ 通过 / ⬜ 失败
定时器清理	⬜ 通过 / ⬜ 失败
并发请求	⬜ 通过 / ⬜ 失败

---

🐛 如何报告问题

如果发现问题，请提供：

1. 测试场景：具体的测试步骤
2. 预期结果：应该发生什么
3. 实际结果：实际发生了什么
4. Console 错误：完整的错误信息
5. 截图/录屏：问题的视觉证明
6. 环境信息：
   • 浏览器版本
   • 操作系统
   • 网络状态

---

✅ 测试完成检查

测试完成后，确认以下内容：

□ 所有关键测试通过
□ Console 无错误
□ Network 请求正常
□ 无内存泄漏警告
□ 用户体验流畅

---

🎯 快速测试命令

# 1. 确认服务器运行
curl http://localhost:3000

# 2. 打开浏览器测试
open http://localhost:3000/auth/sign-in

# 3. 查看编译日志
tail -f /tmp/react-build.log

---

📱 测试页面链接

• 登录页面: http://localhost:3000/auth/sign-in
• 注册页面: http://localhost:3000/auth/sign-up
• 首页: http://localhost:3000/home

---

🔧 开发者工具快捷键

F12          - 打开开发者工具
Ctrl/Cmd+R   - 刷新页面
Ctrl/Cmd+Shift+R - 强制刷新（清除缓存）
Ctrl/Cmd+Shift+C - 元素选择器

---

测试时间：2025-10-14 预计测试时长：15-30 分钟 建议测试人员：开发者 + QA

祝测试顺利！如发现问题请及时反馈。