Question

我正在基于我的React组件创建UserAutocomplete组件（AutoComplete）。

我的AutoComplete组件位于：

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

我的UserAutoComplete是：

import Autocomplete from './autocomplete';

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

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

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

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

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

Answer 1

shallow渲染不会使一个级别下降更多（因此，浅）。因此，您可以搜索input组件：

，而不是AutoComplete

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

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

如果要渲染到更深度，则应使用mount代替。

如何通过酶获取依赖组件元素？

1 个答案: