测试与CI/CD

测试基础设施概述

Gatsby 采用强大的测试策略，包括端到端 (E2E) 测试、视觉回归测试和集成测试。测试基础设施旨在验证 Gatsby 在不同环境和用例中的功能。

测试架构

来源： e2e-tests/development-runtime/package.json1-82 e2e-tests/production-runtime/package.json1-72 e2e-tests/visual-regression/package.json1-48

测试框架

Gatsby 主要使用两个测试框架进行端到端测试

Cypress：这是大多数测试套件使用的主要 E2E 测试框架
Playwright：用于开发运行时中的附加测试

这些框架辅以额外的实用工具

工具	目的
`start-server-and-test`	协调测试执行与服务器启动
`gatsby-cypress`	Gatsby 特定的 Cypress 命令和实用工具
`cypress-image-snapshot`	视觉回归测试
`cypress-run-with-conditional-record-flag.js`	控制 CI 环境中的测试录制

来源： e2e-tests/development-runtime/package.json50-59 e2e-tests/visual-regression/package.json25-31

测试目录结构

E2E 测试按功能和运行时环境进行组织

目录	目的
`e2e-tests/development-runtime`	开发环境测试
`e2e-tests/production-runtime`	生产构建测试
`e2e-tests/mdx`	MDX 集成测试
`e2e-tests/path-prefix`	路径前缀功能测试
`e2e-tests/contentful`	Contentful 集成测试
`e2e-tests/visual-regression`	视觉回归测试
`e2e-tests/themes`	Gatsby 主题测试
`e2e-tests/trailing-slash`	尾部斜杠选项测试

每个测试目录都包含自己的 package.json，其中包含特定的依赖项和测试脚本，允许对不同的 Gatsby 功能和环境进行隔离测试。

来源： e2e-tests/development-runtime/package.json1-4 e2e-tests/production-runtime/package.json1-4 e2e-tests/mdx/package.json1-4 e2e-tests/path-prefix/package.json1-4 e2e-tests/contentful/package.json1-4 e2e-tests/visual-regression/package.json1-4 e2e-tests/themes/production-runtime/package.json1-4 e2e-tests/themes/development-runtime/package.json1-4 e2e-tests/trailing-slash/package.json1-4

端到端测试执行流程

来源： e2e-tests/development-runtime/package.json50-58 e2e-tests/production-runtime/package.json41-49

测试配置和环境变量

Gatsby 测试使用各种环境变量来控制测试行为

环境变量	目的
`CYPRESS_SUPPORT=y`	启用 Cypress 支持
`ENABLE_GATSBY_REFRESH_ENDPOINT=y`	启用用于测试的刷新端点
`GATSBY_ENABLE_QUERY_ON_DEMAND_IN_CI=y`	在 CI 中启用按需查询
`GATSBY_ENABLE_LAZY_IMAGES_IN_CI=y`	在 CI 中启用延迟图片加载
`TEST_PLUGIN_OFFLINE=y`	测试离线插件功能
`TRAILING_SLASH`	控制尾部斜杠行为
`CYPRESS_CONNECTION_TYPE`	模拟不同的连接类型

这些变量允许单独测试特定功能和场景。

来源： e2e-tests/development-runtime/package.json34 e2e-tests/production-runtime/package.json29-30

开发与生产测试

Gatsby 为开发和生产环境维护独立的测试套件

开发运行时测试：测试开发期间的 Gatsby，包括热重载和特定于开发的 API
生产运行时测试：测试生产构建，以确保优化和特定于生产的功能正常工作

来源： e2e-tests/development-runtime/package.json32-45 e2e-tests/production-runtime/package.json28-37 e2e-tests/mdx/package.json33-37

视觉回归测试

Gatsby 使用 @simonsmith/cypress-image-snapshot 实现视觉回归测试。这使得跨构建进行视觉元素的比较成为可能，以捕获无意的 UI 更改。

视觉回归测试的关键脚本

视觉测试作为 CI/CD 流水线的一部分运行，以确保 UI 的一致性。

来源： e2e-tests/visual-regression/package.json7-31

CI/CD 流水线集成

测试基础设施与 Gatsby 的 CI/CD 流水线紧密集成。

关键 CI/CD 功能

条件化测试记录：cypress-run-with-conditional-record-flag.js 控制在 CI 环境中是否记录测试。
跨浏览器测试：默认配置测试在 Chrome 中运行。
并行测试执行：测试跨不同环境并行运行。
工件收集：测试结果和日志作为工件收集。

来源：e2e-tests/development-runtime/package.json53 e2e-tests/production-runtime/package.json48-49

常见测试模式

Gatsby 的测试基础设施中出现了几种模式。

服务器协调：使用 start-server-and-test 来确保在测试开始前服务器已启动。
特定环境测试：开发和生产环境的独立测试。
重置和更新脚本：用于在两次运行之间重置和更新测试数据的脚本。
组合测试套件：combined 脚本运行 Cypress 和 Playwright 测试。

这些模式确保了全面的测试覆盖和可靠的测试执行。

来源：e2e-tests/development-runtime/package.json50-58 e2e-tests/mdx/package.json36-44

特定功能测试

Gatsby 为特定功能实现了专门的测试。

功能	测试目录	关键测试方面
MDX	`e2e-tests/mdx`	MDX 渲染、组件、短代码。
路径前缀	`e2e-tests/path-prefix`	带路径前缀的 URL 处理。
Contentful	`e2e-tests/contentful`	Contentful 集成、图像处理。
末尾斜杠	`e2e-tests/trailing-slash`	带不同斜杠选项的 URL 规范化。
主题	`e2e-tests/themes`	主题组合、隐藏、集成。

每个功能都有专门的测试脚本和配置，以确保正常运行。

来源：e2e-tests/mdx/package.json1-54 e2e-tests/path-prefix/package.json1-57 e2e-tests/contentful/package.json1-51 e2e-tests/trailing-slash/package.json1-42 e2e-tests/themes/production-runtime/package.json1-38 e2e-tests/themes/development-runtime/package.json1-41

测试工具

Gatsby 提供多种实用工具来简化测试。

gatsby-cypress：Gatsby 特定的 Cypress 命令和实用工具。
start-server-and-test：协调服务器启动和测试执行。
cypress-image-snapshot：视觉回归测试功能。
cross-env：跨平台设置环境变量。

这些实用工具简化了跨不同平台的测试创建和执行。

来源：e2e-tests/development-runtime/package.json62-76 e2e-tests/production-runtime/package.json57-66

结论

Gatsby 的测试和 CI/CD 基础设施非常全面，涵盖了从开发到生产的框架的各个方面。通过采用多种测试框架和方法，Gatsby 确保了跨不同环境和用例的高代码质量和可靠功能。

测试基础设施是模块化且可扩展的，允许随着框架的演进轻松添加新的测试和测试类型。与 CI/CD 系统的集成可确保所有更改在发布前都经过彻底测试。