Cypress组件测试时图片资源加载失败问题求助

你遇到的问题根源是：测试代码里传入的image.url指向了CMS的真实资源路径，但本地Cypress测试环境并没有对应的图片文件，所以浏览器发起请求后返回404。而测试能通过，是因为你的测试逻辑只校验了标题的文本和可见性，没有涉及图片的加载状态，所以不影响测试结果，但UI层面会显示图片加载失败。

下面是几种可行的解决方法：

• 用本地占位图替换CMS URL
  直接修改测试用的props，把图片地址换成项目本地存在的图片（比如public目录下的占位图）：

  const prop = {
    heading: 'Heading for heading test',
    description: 'Description for description test',
    image: {
      id: 'test id',
      url: '/test-hero-placeholder.png', // 本地public目录下的图片路径
      alt: 'test'
    }
  }
  

• 拦截图片请求返回本地fixture图片
  先在cypress/fixtures文件夹中放入测试用的图片（比如test-hero-image.png），然后在测试中拦截CMS图片请求，返回本地fixture资源：

  it('validate heading', () => {
    // 匹配CMS图片的请求路径，返回本地fixture
    cy.intercept('GET', '**/assets/cms/**/*.png', { fixture: 'test-hero-image.png' }).as('heroImage');
    cy.mount(<Hero {...prop} />);
    cy.getByDataID(selectors.heading)
      .should('have.text', 'Heading for heading test')
      .and('be.visible');
    // 可选：验证请求被成功拦截
    cy.wait('@heroImage');
  });
  

• 仅模拟图片请求成功状态（无需真实显示）
  如果只是想消除控制台404报错，不关心图片实际显示效果，可以直接拦截请求返回200状态：

  it('validate heading', () => {
    cy.intercept('GET', '**/assets/cms/**/*.png', { statusCode: 200 });
    cy.mount(<Hero {...prop} />);
    cy.getByDataID(selectors.heading)
      .should('have.text', 'Heading for heading test')
      .and('be.visible');
  });
  

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