Я новичок в 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), не перезагружая страницу.
Один из способов справиться с этим — перехватить запрос и передать изображение из приборов.
Этот способ кажется самым простым, поскольку вам не нужно беспокоиться о том, откуда берется изображение.
В следующем тесте я использую свойство 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)