React Enzyme with mount() showing element from parent's .html() but doesn't find element with .find()

Viewed 659

Using React+Redux with Enzyme for testing (running on Jest), I can't find an element when looking for it with Enzyme's find(). I'm seeing the component being rendered in the html.

I am using full DOM rendering using Enzyme's mount(), tried searching by other selectors such as id, className... etc. - same behaviour for all selectors

// Feed.js
const arr = ['hhh', 'kkk'];

const Feed = ({posts}) => (
  <div className={s.rightSide}>
    <div data-hook="ziv-is-there">There</div>
    {arr.map(s => (
      <div key={s} data-hook="ziv-is-everywhere">
        {s}
      </div>
    ))}
    {posts.map((post, i) => (
      <div className="ziv-ziv" data-hook="ziv-is-here" key={post.id}>
        {i}
      </div>
    ))}
  </div>
);

describe('Feed component', () => {
  function setup(initialState) {
    const props = {
        posts: [{id: 123, title: 'hey'}]
    };
    const store = storeCreator(initialState);
    const componentWrapper = mount(
        <I18nextProvider i18n={i18next.init(i18nData)}>
            <Feed store={store} {...props} />
        </I18nextProvider>
    );
    return {
      props,
      store,
      componentWrapper,
    };
  }

   test('renders feed posts', () => {
      const { componentWrapper } = setup();

      expect(componentWrapper.exists()).toBe(true);

      console.log(componentWrapper.html());
      // prints
      /*
      <div class="rightSide">
          <div data-hook="ziv-is-there">There</div>
          <div data-hook="ziv-is-everywhere">hhh</div>
          <div data-hook="ziv-is-everywhere">kkk</div>
          <div class="ziv-ziv" data-hook="ziv-is-here">0</div>
      </div>
      */
      expect(componentWrapper.find('[data-hook="ziv-is-everywhere"]').exists()).toBe(true); // succeeds
      expect(componentWrapper.find('[data-hook="ziv-is-there"]').exists()).toBe(true); // succeeds
      expect(componentWrapper.find('[data-hook="ziv-is-here"]').exists()).toBe(true); // fails
    });
});

What am I missing here?

0 Answers
Related