如何测试Rails View Component的路由跳转正确性？

核心目标是验证组件渲染出的可点击元素（比如<a>标签）的跳转目标是否符合预期，下面分场景给出具体测试方案：

1. 基础组件测试（针对静态链接） #

首先假设你的组件模板（app/components/landing_card_component.html.erb）是常规的链接结构（如果你的模板有差异，只需调整断言逻辑即可）：

<a href="<%= @path %>" class="landing-card">
  <h3><%= @title %></h3>
  <p><%= @description %></p>
  <span><%= @label %></span>
</a>

在spec/components/landing_card_component_spec.rb中编写测试：

require "rails_helper"
require "view_component/test_helpers"

RSpec.describe LandingCardComponent, type: :component do
  include ViewComponent::TestHelpers

  it "渲染的链接指向正确路由" do
    # 用Rails路由助手生成目标路径，避免硬编码URL
    target_route = products_path

    # 渲染组件并传入指定路径
    render_inline(LandingCardComponent.new(path: target_route))

    # 断言页面存在指向目标路由的链接
    expect(page).to have_link(href: target_route)
    # 可额外结合文本验证，比如确认链接包含卡片标题
    # expect(page).to have_link("产品概览", href: target_route)
  end

  it "路径为空时不渲染跳转链接（可选，依业务需求）" do
    render_inline(LandingCardComponent.new(path: ""))
    expect(page).not_to have_tag("a")
  end
end

2. 系统测试（针对JS交互或真实点击场景） #

如果你的卡片不是用原生<a>标签，而是通过JavaScript处理跳转逻辑，就需要用系统测试模拟真实用户操作：

require "application_system_test_case"

class LandingCardComponentSystemTest < ApplicationSystemTestCase
  test "点击卡片跳转到目标页面" do
    # 访问卡片所在的页面
    visit root_path

    # 模拟点击卡片（用卡片上的可见文本定位）
    click_on "产品概览"

    # 验证跳转后的页面路径是否正确
    assert_current_path products_path
  end
end

关键注意事项 #

• 优先用路由助手（如products_path）而非硬编码URL，后续路由变更时测试会自动适配，减少维护成本。
• 组件测试速度快，适合验证静态渲染逻辑；系统测试更贴近真实用户行为，但运行耗时更长，建议只用于核心交互验证。

内容的提问来源于stack exchange，提问作者user16806248