Тестирование компонента с двумя чистыми компонентами

Question

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

У меня есть два чистых функциональных компонента для обработки кейса для мобильного и настольного компьютера.

Вот пример того, чтопохоже,

<ImageBanner>
   {mobile?.image && <MobileBanner mobile={mobile} />}
   {desktop?.image && <DesktopBanner desktop={desktop} />}
</ImageBanner>

MobileBanner и DesktopBanner являются чисто функциональными компонентами, которые просто возвращают html.Я хочу написать jest test для вышеуказанного компонента, как мне написать тест для компонента ImageBanner?

Answer 1

Существует действительно простой подход: 1. если mobile.image существует - <MobileBanner> отображается с mobile={mobile} пройдено

it("renders MobileBanner is mobile passed`, () => {
  const mobile = {image: 'test'};
  const root = shallow(<YourComponent mobile={mobile} />);
  expect(root.find(MobileBanner).prop().mobile).toEqual(mobile);
  expect(root.find(DesktopBanner)).toHaveLength(0);
});

если существует desktop.image - <DesktopBanner отображается с desktop={desktop} пройдено

it("renders DesktopBanner is mobile passed`, () => {
  const desktop = {image: 'test'};
  const root = shallow(<YourComponent desktop={desktop} />);
  expect(root.find(DesktopBanner).prop().desktop).toEqual(desktop);
  expect(root.find(MobileBanner)).toHaveLength(0);
});

, даже если mobile и desktop равны undefined - ошибки нет (по крайней мере <ImageBanner> отображается)

it("does not fail if neither mobile nor desktop prop passed", () => {
  const root = shallow(<YourComponent />);
  expect(root.find(MobileBanner)).toHaveLength(0);
  expect(root.find(DesktopBanner)).toHaveLength(0);
  expect(root.find(ImageBanner).exists()).toBeTruthy();
});