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?