Реагируйте Enzyme с mount (), показывая элемент из родительского .html (), но не находит элемент с .find () - PullRequest
0 голосов
/ 24 октября 2018

Используя React + Redux с Enzyme для тестирования (работает на Jest), я не могу найти элемент при поиске с помощью Enzyme s find () .Я вижу, как компонент отображается в html.

Я использую полный DOM-рендеринг, используя Enzyme s mount(), пытался искать с помощью других селекторов, таких как id, className ..и т. д. - одинаковое поведение для всех селекторов

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

Что мне здесь не хватает?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...