Кипарис: не удалось загрузить ресурс, когда компонент имеет URL-адрес изображения

Я новичок в Cypress и столкнулся с проблемой при тестировании компонентов. У меня есть компонент «Герой», реквизит которого указан ниже.

type HeroProps = {
  heading: string;
  description: string;
  image: {
    id: string;
    url: string;
    alt?: string;
  };
};

какое изображение взято из системы управления контентом.

и вот мой тест

describe('Hero tests', () => {

  const prop = {
    heading: 'Heading for heading test',
    description: 'Description for description test',
    image: {
      id: 'test id',
      url: 'a url from CMS',
      alt: 'test'
    }
  }

  it('validate heading', () => {
    cy.mount(<Hero {...prop} />);
    cy.getByDataID(selectors.heading)
      .should('have.text', 'Heading for heading test')
      .and('be.visible');
  });
});

тест пройдет, но когда я проверяю результат из пользовательского интерфейса, я вижу, что изображение не может отображаться, а консоль показывает:

GET http://localhost:8080/assets/cms/xxxx/xxx.png 404 (Not Found)

кто-нибудь знал, где я могу сделать неправильно? Спасибо!

🤔 А знаете ли вы, что...
С React можно создавать одностраничные приложения (SPA), не перезагружая страницу.


2
69
1

Ответ:

Решено

Один из способов справиться с этим — перехватить запрос и передать изображение из приборов.

Этот способ кажется самым простым, поскольку вам не нужно беспокоиться о том, откуда берется изображение.

В следующем тесте я использую свойство naturalWidth элемента <img>, чтобы убедиться, что изображение действительно загрузилось.

const prop = {
  heading: 'Heading for heading test',
  description: 'Description for description test',
  image: {
    id: 'test id',
    url: '../../assets/cms/cypress.png',
    alt: 'test'
  }
}

cy.intercept(/cms/, { fixture: 'cypress.png' }).as('loadImage')

cy.mount(<Hero {...prop} />)
cy.wait('@loadImage')

cy.get('img')
  .then($el => {
    const element = $el[0]
    const width = element.naturalWidth
    return width
  })
  .should('be.gt', 0)

// OR

cy.get('img')
  .its('0.naturalWidth')
  .should('be.gt', 0)


Без перехвата