启用JS的Capybara React功能测试因图片请求失败问题

我之前也踩过一模一样的坑！Capybara的JS驱动（比如Chrome）是在真实浏览器环境里运行的，它会把你配置的Rails.root本地路径当成HTTP请求地址，跑去请求类似http://localhost:3000/xxx/spec/test_files/...的资源，服务器当然找不到这些文件，直接导致测试失败。下面给你几个实用的解决思路：

方法1：配置Rails静态服务托管测试图片 #

这是最贴近真实生产环境的方案，让Rails直接把测试目录里的图片当成静态资源返回：

1. 修改Paperclip测试环境配置
   把url改成相对路径，让浏览器向当前测试服务器发起请求，而不是直接指向本地文件：

   # config/environments/test.rb
   Paperclip::Attachment.default_options[:path] = "#{Rails.root}/spec/test_files/:class/:id_partition/:style.:extension"
   Paperclip::Attachment.default_options[:url] = "/test_files/:class/:id_partition/:style.:extension"
   

2. 挂载测试文件目录到静态服务
   在测试环境的路由配置里，把spec/test_files目录挂载成静态资源路径，这样Rails就能处理这些请求了：

   # config/environments/test.rb
   config.public_file_server.enabled = true
   config.public_file_server.headers = {
     'Cache-Control' => 'public, max-age=3600'
   }
   
   # 挂载测试文件目录
   Rails.application.routes.draw do
     mount ActionDispatch::Static.new(
       "#{Rails.root}/spec/test_files",
       url: '/test_files'
     ) unless Rails.env.production?
   end
   

   这样浏览器请求/test_files/xxx.jpg时，Rails会直接从spec/test_files里找到对应的文件返回，测试就能正常跑起来了。

方法2：拦截图片请求（无需配置静态服务） #

如果不想折腾静态服务，也可以直接在测试里拦截图片请求，避免浏览器发起无效请求：

# 在你的测试文件里添加钩子
before(:each) do
  # 仅对ChromeDriver生效，利用DevTools协议拦截请求
  page.driver.browser.network.intercept do |request, continue|
    if request.url.include?('/test_files/')
      # 可以选择终止请求，或者返回一个空白占位图
      request.abort
      # 或者返回base64格式的空白gif：
      # request.respond_with(
      #   status: 200,
      #   headers: { 'Content-Type' => 'image/gif' },
      #   body: Base64.decode64('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==')
      # )
    else
      continue.call
    end
  end
end

这种方法适合快速解决问题，不用改动太多配置，但测试场景和真实环境的贴合度会差一点。

方法3：在React组件里做测试环境适配 #

你也可以在React组件层面做判断，如果是测试环境，就用占位图替代真实图片：

// 你的React图片组件
const ImageComponent = ({ imageUrl }) => {
  // 判断是否是测试环境（可以通过环境变量或者Capybara注入的标识）
  const isTestEnv = process.env.NODE_ENV === 'test';
  const src = isTestEnv 
    ? 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    : imageUrl;

  return <img src={src} alt="..." />;
};

这样测试时浏览器只会加载一个极小的空白gif，不会发起无效的本地文件请求。

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