javascript - 如何通过Enzyme获取依赖组件元素？

Question

我正在基于我的 AutoComplete 组件创建一个 React 组件 (UserAutocomplete)。

我的AutoComplete组件在哪里:

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

我的UserAutoComplete是:

import Autocomplete from './autocomplete';

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

并使用Enzyme + Jest创建测试，但是当我使用find函数获得input时，正在返回空。

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

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

如果它在子组件中，我如何获取此输入？

Answer 1

shallow渲染不会向下渲染超过一级(因此，浅)。因此，您可以搜索 AutoComplete 组件，而不是 input:

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

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

如果你想渲染到更深度，你应该使用mount相反。