Testing a component with two pure components

Question

I have a component that renders a image banner. This component makes use of data to specifically render the image banner on mobile or desktop.

I have two pure function components to handle the case for mobile and desktop.

Here is a sample of what it looks like

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

MobileBanner and DesktopBanner are pure functional components that just return back html. I want to write jest test for the above component, how do I write a test for the component ImageBanner ?

Answer 1

There is really straightforward approach: 1. if mobile.image exists - <MobileBanner> is rendered with mobile={mobile} passed

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);
});

2. if desktop.image exists - <DesktopBanner is rendered with desktop={desktop} passed

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);
});

3. even if both mobile and desktop are undefined - there is no error(at least <ImageBanner> is rendered)

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();
});