测试 | 锤子前端

《在 GitHub Copilot 应用中流畅渲染超大 Pull Request》

Sat, 26 Sep 2026 23:54:52 GMT

《在 GitHub Copilot 应用中流畅渲染超大 Pull Request》

标签：
#软件工程 #前端性能优化 #PullRequest #虚拟化渲染 #React #测量调度 #滚动锚定 #性能监控

总结：
文章介绍了 GitHub Copilot 应用如何重构 Pull Request 视图，使其能够流畅处理包含 2,200 个文件、超过 100 万行代码变更和 400 多条内联评论的超大型 PR。核心挑战在于评论高度的动态性——与代码行不同，评论高度取决于 Markdown 换行、可展开区块、回复框和图片加载等渲染时才能确定的因素。团队通过分离确定性与动态几何、实现智能测量调度器、采用滚动锚定技术，并建立自动化测量循环来解决这一问题，最终实现了百万行 diff 的流畅浏览体验。

文章要点：

1. 代码与评论的几何分离：代码行高度固定且可预先计算，而评论高度动态变化。团队将文档高度分为确定性代码高度（精确前缀和）和动态块高度（估算后测量），两者独立管理，避免评论调整时重建整个代码几何。

2. 智能测量调度器：放弃每块一个 ResizeObserver 的方案（会触发反馈循环），改为单一的空闲和滚动门控测量通道。仅在视口附近约 2400px 范围内进行测量，屏幕上的块优先批量读取，离屏块最多做一次有限渲染，超过视口高度的块跳过测量。

3. 滚动锚定技术：当测量高度与估算不符时，通过身份而非像素来校正——记录用户锚定的行或块，应用高度增量后，将同一锚点解析到新像素位置并滚动，确保用户视线不跳动。区分用户滚动与程序滚动，避免侧边栏切换等操作误触发保护机制。

4. 数据管道优化：流式传输结构优先于内容，文件树和元数据在文档加载时即可渲染；语法高亮在主线程外运行，行先以纯文本显示；释放文档时保留最近几个 diff 的缓存，平衡内存与返回时的加载速度。

5. 自动化测量循环：建立"变更→测量→改进"的无人值守循环，包括无头探针车道（声明式流程 + 生产环境插桩）和自动驾驶仪（驱动真实桌面应用），通过健康信号（如无未填充间隙、评论块非空）自动检测问题，实现机械式调试而非人工复现。

URL：
https://github.blog/engineering/user-experience/rendering-huge-pull-requests-in-the-github-copilot-app/

The GitHub Blog

Rendering huge pull requests in the GitHub Copilot app

How we rebuilt the diff surface in the GitHub Copilot app to open a million-line pull request with hundreds of inline review comments.

《十个防止 AI 代码泛滥的前端项目护栏》

Thu, 10 Sep 2026 23:23:08 GMT

《十个防止 AI 代码泛滥的前端项目护栏》

标签：
#前端 #TypeScript #React #AI编程 #代码质量 #ESLint #测试策略 #CI_CD #代码审查 #工程实践

总结：

本文针对 AI 生成代码速度远超人类审查能力的前端项目，提供了一套实用的十项防护清单。核心思路是通过自动化工具链（类型系统、Linter、变异测试、CI 门禁）在代码合并前拦截机械性错误，而非依赖人工逐行审查。

文章要点：

1. 用 OpenAPI 契约替代手写类型：通过 Hey API 等工具从 OpenAPI 规范直接生成 TypeScript 类型、客户端和 Zod 校验，避免 AI 臆造不存在的 API 字段（如 user.fullName），让编译器在构建期就报错。

2. 开启严格 TypeScript 配置：启用 noUncheckedIndexedAccess 等严格标志，让数组索引访问返回 T | undefined，迫使代码显式处理边界情况，减少 AI 常见的"想当然"代码。

3. 把 Linter 当作行为过滤器：使用 SonarJS、react-you-might-not-need-an-effect、vitest/playwright 插件、jsx-a11y 等 ESLint 插件，自动拦截认知复杂度过高、不必要的 Effect、可访问性违规等问题。

4. 设定架构层边界：使用 eslint-plugin-boundaries 或 dependency-cruiser 强制实施分层架构（如 UI 层不得直接访问 API 层），防止 AI 生成的代码逐渐退化为"GitHub 平均水平"的混乱结构。

5. 将重复出现的错误转化为自定义 Linter 规则：当同一种 bug 第二次出现时，立即编写自定义 ESLint 规则禁止该模式。例如禁止在服务层函数中使用 Math.round 和 toFixed，避免双重取整导致的薪资计算错误。

6. 把规则直接喂给 AI 模型：通过项目规则文件（如 .cursor/rules、CLAUDE.md）或技能文件（如 react-doctor），将项目约定、架构决策和禁止模式直接提供给 AI，让模型在生成代码时就遵循规范。

7. 用变异测试验证测试有效性：使用 Stryker 故意破坏代码（翻转运算符、反转条件、交换返回值），检查现有测试是否能捕获这些变异。存活的变异体通常暴露"只测形状不测内容"的无效测试。一个项目约 4,700 个变异体在 6 分钟内完成扫描。

8. 用 Knip 清理死代码：Knip 可以检测未使用的文件、导出和依赖，配合自定义可达性脚本填补其盲区，防止 AI 生成大量"以防万一"却无人调用的冗余代码。

9. 用 jscpd 检测重复代码：AI 倾向于在不同地方生成几乎相同的逻辑，jscpd 能发现这些重复，提示抽象机会或错误的复制粘贴。

10. 将所有检查强制设为 CI 门禁：上述所有工具（类型检查、Lint、测试、变异测试、重复检测）必须作为 CI 的强制通过项，而非可选建议，确保 AI 生成的代码无法绕过质量关卡。

11. 成本与局限：这些护栏会产生噪音（误报）、规则过时和新人上手摩擦等成本，建议按"类型 → Lint → 测试 → CI"的顺序渐进式推行。同时需注意，这些检查只能捕获机械性错误，无法识别糟糕的品味或错误的抽象。

URL：
https://evilmartians.com/chronicles/ten-anti-ai-slop-moves-for-frontend-projects-going-faster-than-humans-can-review

evilmartians.com

10 anti-AI slop moves for frontend projects going faster than humans can review—Martian Chronicles, Evil Martians’ team blog

Ten checks that catch what AI-written frontend code hides: contract codegen, boundary linting, mutation testing, and dead-code detectors.

《Vitest 5.0 正式发布》

Thu, 10 Sep 2026 23:19:53 GMT

《Vitest 5.0 正式发布》

标签：
#前端 #JavaScript #Vitest #测试框架 #单元测试 #性能优化 #BrowserMode #MockAPI #基准测试 #断言改进 #代码覆盖率

总结：

Vitest 5.0 于 2026 年 9 月 3 日正式发布，本次大版本以性能优化为核心，同时带来 Trace View 追踪视图、嵌套项目配置、vi.when 条件 Mock、基准测试重写等多项重要更新，并默认启用更严格的断言与 clearMocks 行为，要求 Vite >= 6.4.0 和 Node.js >= 22.12.0。

文章要点：

1. 性能大幅提升：通过共享 Vite 服务器、稳定的文件系统模块缓存、减少主进程与 worker 往返、加速 vm 池与浏览器模式等优化，整体测试速度提升 8%–53%，大型项目（1,280 模块）运行时间从 7.24s 降至 5.83s。

2. **新增 vitest doctor 诊断工具**：自动运行替代配置并推荐更快的选项，同时默认输出性能提示，帮助用户发现配置瓶颈。
Browser Mode 内置 Trace Viewew**：开启 browser.traceView 后，可记录交互、断言和 DOM 快照，支持逐步回放测试过程，便于调试 CI 失败。
嵌套项目与配置继承继承**：内联项目默认继承根配置（无需 extends: true），被引用的配置文件可声明自己的 projects，支持多级嵌套结构。

5. **新 API vi.when**：支持按参数定义不同的 Mock 返回值，支持深度相等和 expect.any() 等非对称匹配器，并可限制调用基准测试 API 重写API 重写**：bench 变为测试上下文 fixture，可在常规 test() 中使用，支持 fixtures、生命周期钩子、重试和断言，结果可存储并与基线定位器错误显示 ARIA 树ARIA 树**：浏览器模式下定位失败时，同时打印 ARIA 快照和 HTML，帮助快速理解 getByRole 等查询的匹配逻辑；定位器默认启用严格模式。

8. **Mock Temporal API**：假计时器现在同时模拟 Temporal 和 Date，适用于 vi.useFakeTimers() 和 vi.setSystemTime()。

9. **更严格的断言行为**：未 await 的异步断言（resolves、rejects 等）现在会导致测试失败；expect.poll 超时后拒绝并支持 AbortSignal 取消。

10. **clearMocks 默认启用**：每个测试前自动清除 Mock 调用历史，避免测试间报告器统一输出目录。

11. **报告器统一输出目录**：所有报告器输出集中到 .vitest 目录，减少 .gitignore 配置；HTML 报告器支持 singleFile 选项生成单文件报告。

12. **其他实用改进**：新增 --repeats 选项重复运行测试以排查 flaky 测试；injectCjsGlobals 可禁用 CJS 全局注入；覆盖率工具切换到维护中的 @vitest/istanbuljs 包。

13. **破坏性变更**：要求 Vite >= 6.4.0 和 Node.js >= 22.12.0，升级前建议查阅迁移指南。

URL：
https://vitest.dev/blog/vitest-5

vitest.dev

Announcing Vitest 5.0

Vitest 5.0 Release Announcement

《Playwright Fixtures 的"魔法"实现原理》

Fri, 12 Jun 2026 09:14:37 GMT

《Playwright Fixtures 的"魔法"实现原理》

标签：#测试 #Playwright #JavaScript #API设计 #源码分析

总结：
作者深入剖析 Playwright 的 Fixtures API 如何通过 Function.prototype.toString() 在测试运行前"偷看"函数参数，实现按需懒加载。文章揭示了这一巧妙但略带"魔法"的设计：Playwright 强制要求测试函数使用对象解构语法（如 `async ({ page }) =>`），然后通过正则解析源码字符串提取 fixture 名称，从而只初始化测试真正需要的依赖。作者还验证了该方案对不同函数类型、压缩工具（Terser/esbuild）的兼容性，并坦诚讨论了其"神奇感"与潜在局限性。

文章要点：
1. 懒加载是核心卖点**：Playwright 的 fixtures 按需初始化，不用就不创建，能节省测试执行时间；但传统 Proxy/getter 方案会导致异步 fixture 需要 `await`，破坏 API 体验
2. "偷看"函数参数是关键**：Playwright 在不调用测试函数的情况下，就能知道它需要哪些 fixture，这解决了"鸡生蛋"难题——要知道用哪些 fixture 才能准备它们，但准备前又不能运行测试
3. **`Function.prototype.toString()

 是秘密武器**：Playwright 把测试函数转成字符串，用正则提取解构参数，因此强制要求 `async ({ page }) =>

这种写法，否则直接抛错"First argument must use the object destructuring pattern"
4. **解析逻辑相当 robust**：源码展示了 innerFixtureParameterNames 的实现，能正确处理普通函数、async 函数、生成器函数、箭头函数等多种声明方式，还能处理带默认值的复杂解构
5. **压缩工具不会破坏它**：实测 Terser 和 esbuild 的 minify 只会把参数名缩短（如 foo → `o`），不会改解构语法，所以 Playwright 的正则解析依然能工作
6. **魔法有代价**：函数组合（如 `noThrow(fn) 包装后传入）会失效，因为 `toString() 拿到的是包装函数的源码而非原始函数；这种"黑魔法"虽然 DX 很好，但违反了"最小惊讶原则"
7. **作者态度很诚实**：认可 Playwright 团队的选择非常适合测试框架场景，但坦言这种魔法比个人期望的多了一点，想不出其他库有同样充分的理由采用此方案

URL：
https://ivakin.dev/blog/how-playwright-fixtures-work

ivakin.dev

Uncovering the Magic Behind Playwright's Fixtures API

Exploring the API design behind Playwright fixtures, and how a simple test API hides a surprisingly magical implementation.

《AI编码代理生产级工程技能集》

Sun, 26 Apr 2026 09:39:26 GMT

《AI编码代理生产级工程技能集》

标签：#AI辅助编程 #开发工具 #AI_Agent #工程规范 #ClaudeCode #Cursor #代码审查 #测试驱动开发 #CI_CD

总结：
这是一个为AI编码代理（如Claude Code、Cursor、GitHub Copilot等）设计的生产级工程技能仓库，由Addy Osmani维护。它将资深工程师在真实项目中的工作流、质量门禁和最佳实践编码为20个结构化技能，覆盖从需求定义到上线发布的完整开发生命周期，让AI代理在每次编码时都能保持一致的专业水准，避免走"最短路径"而跳过测试、审查等关键环节。

文章要点：
- 六阶段开发流水线：从Define（定义需求）→ Plan（拆解任务）→ Build（增量编码）→ Verify（验证测试）→ Review（质量门禁）→ Ship（安全发布），像工厂流水线一样规范AI的每一步动作
- 7个斜杠命令即开即用：/spec写需求文档、/build增量开发、/test跑测试、/review代码审查……输入命令就能自动激活对应的技能组合，非常顺手
- 20个实战技能全覆盖：从API设计、前端工程、TDD测试驱动，到性能优化、安全加固、Git工作流、CI/CD自动化，每个技能都自带步骤清单、验证标准和"反找借口"表格（比如AI想跳过测试时，会被技能里的反驳论据怼回去😄）
- 多工具无缝兼容：Claude Code一键插件安装，Cursor复制到rules目录，Gemini CLI、Windsurf、GitHub Copilot、Kiro等主流AI编程工具都能直接用，技能就是纯Markdown，通吃所有支持系统提示词的代理
- Google工程文化落地：融入了Hyrum定律、Beyonce规则、测试金字塔、Chesterton围栏等Google实战智慧，不是泛泛而谈的理论，而是嵌入到每一步工作流中的可执行标准

文章URL：https://github.com/addyosmani/agent-skills

GitHub

GitHub - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents.

Production-grade engineering skills for AI coding agents. - addyosmani/agent-skills