Используя 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
});
});
Что мне здесь не хватает?