如何用 awesome-copilot 的 react19-upgrade 插件完成 React 18 到 19 的迁移与测试修复【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot你的目标是把一个 React 18 代码库升级到 React 19并且让构建和全部测试在升级后通过。awesome-copilot 仓库中的react19-upgrade插件提供了完成这件事的工具链四个专职 agent审计、依赖升级、源码迁移、测试修复和三个模式参考 skill由react19-commander按顺序调度每个阶段有明确的准入门槛gate不达标不进入下一阶段。前提条件代码库当前运行在React 18。如果你的项目还在 React 16/17README 明确要求先使用react18-upgrade插件升到 React 18.3.1再用本插件完成 React 19 的最终升级。准备安装插件并确认起点在 GitHub Copilot 中安装插件copilot plugin install react19-upgradeawesome-copilot安装完成后插件带来以下组件见 plugins/react19-upgrade/README.md组件职责react19-commander总调度按 audit → deps → migrate → tests 顺序执行并把关react19-auditor全库扫描 React 19 破坏性变更产出审计报告react19-dep-surgeon升级 react19 及依赖库消除 peer 冲突返回 GO/NO-GOreact19-migrator按审计报告改写源码react19-test-guardian迁移并修复测试跑到 0 失败为止commander 启动时先读取记忆状态用于中断后恢复再确认当前 React 版本node -e console.log(require(./node_modules/react/package.json).version) 2/dev/null || cat package.json | grep react它会向你报告哪些阶段已完成、哪些尚未开始然后从第一个未完成的阶段继续。启动迁移在 Copilot 聊天中发送 README 给出的启动指令Ask: Start implementing React 19 migration for my codebasecommander 会依次调用四个子 agent一次只调一个串行执行。每个阶段通过后它把状态写入仓库记忆react19-migration-state包含phase、各阶段完成标记、reactVersion、failedTests等字段如果会话中断下次启动可以从断点恢复而不重跑已完成的阶段。阶段一审计生成 React 19 问题清单react19-auditor只读不改对全库执行四类扫描见 agents/react19-auditor.agent.md依赖审计列出所有 react/testing/jest/apollo/emotion/router 相关依赖并用npm ls 21 | grep -E WARN|ERR|peer|invalid|unmet检查 peer 冲突已移除 API 扫描ReactDOM.render、ReactDOM.hydrate、unmountComponentAtNode、findDOMNode、createFactory、react-dom/test-utils引用、Legacy ContextcontextTypes/childContextTypes/getChildContext、字符串 refthis.refs.废弃模式扫描forwardRef仅作可选重构项处理不是强制移除、函数组件上的.defaultProps、无初始值的useRef()、propTypes、未使用的React默认导入测试文件扫描act的导入来源、Simulate.用法、react-test-renderer引用、toHaveBeenCalledTimes断言StrictMode 行为变化可能影响调用次数。审计结果是.github/react19-audit.md报告包含分级问题表Critical / Deprecated / Test-Specific / Informational、依赖问题和按顺序排列的迁移计划。该阶段的准入门槛报告文件存在且 auditor 返回了问题总数。如果不想等 agent也可以自己先跑其中几条 grep 快速判断问题量级例如grep -rn ReactDOM\.render\s*( src/ --include*.js --include*.jsx grep -rn useRef()\|useRef( ) src/ --include*.js --include*.jsx grep -rn contextTypes\|childContextTypes\|getChildContext src/ --include*.js --include*.jsx阶段二依赖手术——升到 react19 并清零 peer 冲突react19-dep-surgeon按固定步骤执行见 agents/react19-dep-surgeon.agent.md。核心命令是# 升级 React 核心 npm install --save react^19.0.0 react-dom^19.0.0 node -e const rrequire(react); console.log(React:, r.version) node -e const rrequire(react-dom); console.log(ReactDOM:, r.version) # 升级测试库RTL 14 及以下内部使用 ReactDOM.render必须升到 16 npm install --save-dev testing-library/react^16.0.0 testing-library/jest-dom^6.0.0 testing-library/user-event^14.0.0项目里如果存在apollo/client或emotion/reactemotion/styled会被一并升级到latest不存在则跳过。peer 冲突处理规则文档写得很明确禁止使用--force--legacy-peer-deps只能作为最后手段且要在package.json的_notes字段中留下注释说明若某依赖没有兼容 React 19 的版本文档化并在报告中向 commander 上报而不是强行绕过。随后是干净安装校验。注意这一步会删除node_modules和package-lock.json再重新安装属于有破坏性的操作副作用是本地依赖全部重建rm -rf node_modules package-lock.json npm install npm ls 21 | grep -E WARN|ERR|peer | wc -l # 期望输出 0该阶段的 GO/NO-GO 判定react19.x.x、react-dom19.x.x、testing-library/react16.x均已确认且npm ls的 peer 错误数为 0任何一条不满足即 NO-GO不会进入下一阶段。阶段三源码迁移react19-migrator依据审计报告迁移非测试源码文件必改项包括原写法React 19 写法ReactDOM.render(App /, ...)createRoot(document.getElementById(root)).render(App /)从react-dom/client导入ReactDOM.hydrate(...)hydrateRoot(...)unmountComponentAtNode(container)保存root引用后调用root.unmount()findDOMNode(componentRef)直接用componentRef.current函数组件Component.defaultProps {...}改为 ES6 默认参数function Button({ label Click })useRef()useRef(null)Legacy ContextcontextTypesgetChildContextcreateContextuseContext字符串 refrefinputRefcreateRef()或回调 ref两个容易误判的点文档有专门说明forwardRef不是破坏性变更。React 19 中它仍然受支持ref可以直接作为 prop 传入是可选的现代化写法commander 对 migrator 的指令是forwardRef 属可选现代化除非明确需要否则跳过。.propTypes不要删除。React 19 移除的是 React 包内置的运行时校验prop-types独立包仍然有效。做法是在.propTypes块上方加注释说明// NOTE: React 19 no longer runs propTypes validation at runtime. // PropTypes kept for documentation and IDE tooling only.完整的 before/after 代码包括forwardRefuseImperativeHandle、defaultProps含null的边界、跨文件 context 迁移都在 skills/react19-source-patterns/references/api-migrations.md 中可对照检查。该阶段的准入门槛非测试源码文件中用 grep 复查剩余废弃模式数为 0。一个需要留意的重构边界如果原来的代码没有保存createRoot返回的root引用root.unmount()就需要先改造代码把 root 传出去或放到一个全局注册处见 api-migrations.md 中的 Caveat。阶段四测试套件修复react19-test-guardian按 agents/react19-test-guardian.agent.md 中的八类迁移项T1–T8逐个处理测试文件关键映射问题修复import { act } from react-dom/test-utils改为import { act } from reactSimulate.click(element)改为fireEvent.click(element)从testing-library/react导入renderIntoDocument/findRenderedDOMComponentWithTag等换成 RTL 的render和查询getByRole、getByTestId等StrictMode 下 spy 调用次数断言React 19 不再双重调用 effectReact 18 下 ×2/×4 的断言需按实际运行结果改为 ×1/×2测试中构造的 ref 形状{ current: undefined }改为{ current: null }错误边界测试中console.error次数React 18 下断言 ×2React 19 下为 ×1not wrapped in act(...)警告异步更新包进await act(async () { ... })StrictMode 调用次数的处理策略是跑一次失败用例从报错信息里读实际次数按实际值改断言而不是预先猜数值npm test -- --watchAllfalse --testPathPatternComponentName --forceExit 21 | grep -E Expected|Received|toHaveBeenCalled执行方式是循环修复修完一批 → 跑全量 → 对每个 FAIL 单独重跑该文件确认 → 重复直到没有 FAIL 行。文档同时明确了底线不允许删除测试、不允许新增.skip已有.skip的测试要按名称列出说明。某个测试三次尝试仍修不好时会写入.github/react19-audit.md的 Blocked Tests 段落并连同原因上报而不是静默跳过。自定义 render helperrenderWithProviders、test-utils.js等也要检查内部若还在用ReactDOM.render要改成 RTL 的render加 wrapper。最终验证四个阶段全部通过后commander 亲自执行最终校验不是由子 agent 汇报完成了就算数echo FINAL BUILD npm run build 21 | tail -20 echo FINAL TEST RUN npm test -- --watchAllfalse --passWithNoTests --forceExit 21 | grep -E Tests:|Test Suites:|FAIL|PASS | tail -10判定条件构建以退出码 0 结束且测试输出为 0 失败。两条都满足才算 COMPLETE任何一条失败commander 会定位是哪个阶段引入的回归带着具体错误上下文重新调用对应子 agent。常见测试报错速查test-guardian 文档给出的错误分诊表遇到这些报错可直接对号入座报错原因修复act is not a function导入位置错误import { act } from reactSimulate is not defined导出已移除换成fireEventExpected N received M调用次数StrictMode 行为变化跑测试按实际次数改断言Cannot find module react-dom/test-utils该包内容已移除按映射表切换所有导入cannot read .current of undefineduseRef()形状初始值补nullnot wrapped in act(...)异步状态更新包进await act(async () {...})Warning: ReactDOM.render is no longer supported测试 setup 里还有旧 render更新为createRoot限制与恢复机制插件假设起点是React 18React 16/17 代码库必须先经过react18-upgrade升到 React 18.3.1README 中这是明确的前置要求。依赖升级全程禁用--force--legacy-peer-deps仅在最后手段下使用且必须留注释存在不兼容 React 19 的依赖时流程会上报而不是绕过。会话中断不会丢失进度commander、auditor、dep-surgeon、test-guardian 各自使用仓库记忆如react19-migration-state、react19-audit-progress、react19-test-state保存阶段进度下次激活从断点继续。三个 skillreact19-concurrent-patterns、react19-source-patterns、react19-test-patterns是迁移模式参考库其中 skills/react19-source-patterns/SKILL.md 附带的快速参考表可以当作迁移过程中的核对清单迁移完成后想使用 React 19 的并发特性Suspense、use()、Server Components 集成可再查react19-concurrent-patterns。相关文档plugins/react19-upgrade/README.md、agents/react19-commander.agent.md、agents/react19-auditor.agent.md、agents/react19-dep-surgeon.agent.md。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考