#优质博文 #AI #AST #React #前端 #测试 #工程实践 #ClaudeCode #codemod #course
好文章,关于使用 AI 进行重构迁移的教科书式文章。
Migrating 6000 React tests using AI Agents and ASTs

AI 摘要:作者在 Filestage 的前端项目中使用 AI Agents(特别是 Claude Code)与 AST(Abstract Syntax Tree)技术,将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程,最后总结出 AI 在大规模代码迁移中的优势与局限,并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

[以下是方便搜索索引的大纲 (AI 生成),请读原文]
1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件,总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化,行为变化大,手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败,暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南,分析版本差异与新 API。
• 确定主要变化:异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14,避免一次性大变更。
• 生成迁移指南并提交第一份 PR,保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST,再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果(例如导入路径、 renderWithUserEvent 封装替换)。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件,执行 lint 检查与单测验证。
• 持续观察失败案例,不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字;codemod 从 271 行发展到近千行,测试覆盖更完备。
• 共执行 50 次迁移,形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入,AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断,验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移,每个 PR 约半小时。
• 若纯人工迁移,估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制,是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者,从“重复劳动”转向更有创造力的工作。


author Elio Capella Sánchez Migrating 6000 React tests using AI Agents and ASTs
 
 
Back to Top