enzyme: ShallowWrapper::dive() can not be called on Host Components

I don’t normally create this many test helpers but allowed my collegue to while teaching him TDD while pairing. We found though some pain that I never feel, because I usually put some of this stuff in a beforeEach rather than helpers as we have below:

  function expectCarouselItemsLength(items, expectedLength) {
    const carousel = createCarousel(items);
    const carouselItems = carousel.findAttribute(carousel, 'carousel-item');
    expect(carouselItems.length).to.equal(expectedLength);
  }

  // this needs to be in setup, helpers should not do setup stuff, we need to keep helpers simpler
  function createCarousel(items) {
    const carousel = shallow(<Carousel items={items} />);
    const foundCarousel = findAttribute(carousel, 'carousel');
    return foundCarousel;
  }

  function findAttribute(component, attributeName) {
    const foundComponent = component.find(`[data-test='${attributeName}']`);
    return foundComponent;
  }

So I found troubleshooting tests hard because we’re overdoing test helpers first off. Anyway the pain with our helpers doing to much causing use to live and debug in our helpers and having to look up and down too much from our test definition, came here when I new I needed to probably dive:

    it.only('returns one item', () => {
      const items = [{
        description: 'description',
        image: 'image.jpg',
        title: 'title',
      }];

      expectCarouselItemsLength(items, 1);
    });

so I thought ok fine, let me dive() because I know that searching for ‘carousel-item’ doesn’t live in the immediate parent anymore, it lives in a child.

When I went to try and add dive() to this I got ShallowWrapper::dive() can not be called on Host Components:

  function expectCarouselItemsLength(items, expectedLength) {
    const carousel = createCarousel(items);
    const carouselItems = carousel.dive().findAttribute(carousel, 'carousel-item'); // error here, can't dive on Host Components
    expect(carouselItems.length).to.equal(expectedLength);
  }

it didn’t let me dive on the carousel const.

Why?

Normally I wouldn’t have this in a helper anyway and would be able to just in my test do that and it would have been fine I think

Carousel.js

import React, { Component } from 'react';
import Slider from 'react-slick';
import CarouselItem from './CarouselItem';

export default class Carousel extends Component {
  renderItems() {
    const { items } = this.props;

    return items && items.map((item, i) => {
      return <CarouselItem key={`${item.title}${i}`} item={item} />;
    });
  }

  render() {
    const { item } = this.props;
    return (
      <div className="container">
        <div test="carousel">
          <Slider>
            {this.renderItems()}
          </Slider>
        </div>
      </div>);
  }
}