How to get dependency component element by Enzyme?

Question

I'm creating a React component ( UserAutocomplete ) basing my AutoComplete component.

Where my AutoComplete component is:

render(
   <input type='text' class='autocomplete'/>
);

And my UserAutoComplete is:

import Autocomplete from './autocomplete';

render(
    <Autocomplete {...this.props} />
);

And creating test with Enzyme + Jest , but when I get input with find function, is returning null .

it('test defaultValue prop', () => {
    const wrapper = shallow(
        <UserAutocomplete/>
    );

    console.log(wrapper.find('input')); // returning null
});

How to can I get this input, if it's in child component?

Answer 1

shallow rendering does not render more that one level down (hence, shallow ). So, instead of input , you can search for the AutoComplete component:

it('test defaultValue prop', () => {
    const wrapper = shallow(
        <UserAutocomplete/>
    );

    console.log(wrapper.find('AutoComplete')); // returning null
});

If you want to render to more depth, you should use mount instead.