41、JavaScript 测试与框架应用：Cypress 与 Hotwire/React 实践

JavaScript 测试与框架应用：Cypress 与 Hotwire/React 实践

1. Cypress 测试入门

1.1 测试 JavaScript 的挑战与 Cypress 简介

测试 JavaScript 代码向来颇具挑战，因其通常在浏览器环境中运行，与 DOM 和用户行为紧密交互，编写有价值、稳定且快速的测试并非易事。测试 JavaScript 有两个主要目标：一是验证代码是否按预期运行；二是通过快速模拟复杂场景来辅助开发。

在众多测试工具中，Cypress 专注于端到端测试，它能模拟与 Rails 服务器和浏览器的交互。与传统的 Rails 端到端测试工具 Capybara 相比，Cypress 有其独特的优缺点。Capybara 能更好地集成 Rails 代码，可使用 RSpec 并在正常的 Rails 测试流程中运行，还能访问 ActiveRecord 进行数据设置和断言。而 Cypress 测试用 JavaScript 编写，有独立的运行进程，虽通过 cypress - rails 宝石可访问部分 Rails 功能，但整体设置不如 Capybara 便捷。不过，Cypress 架构独特，能有效控制整个运行过程，包括浏览器进程，拥有自己的测试 UI，可选择运行测试或在文件更改时自动运行，在等待操作完成时更稳定，还能提供调试工具、自动截图和测试视频，甚至可模拟服务器并提供虚假响应。

1.2 Cypress 的安装与配置

安装 Cypress 分两步：首先作为包安装 Cypress 本身，使用命令 $ yarn add --dev cypress ；然后安装 cypress - rai