CODEWITHSUNDEEP
javascriptreactjsenzyme
Lai32290
Lai32290

Reputation: 8548

How to get dependency component element by Enzyme?

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?

Upvotes: 0

Views: 67

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 1

Related Questions