使用 Enzyme 和 Jest 无法通过“ul”中没有“li”的测试

Question

简单的待办事项列表应用，开始使用 Jest 和 Enzyme。

在 App.js 中，我正在渲染以下组件，其中 props.list 等于状态上的空数组。

export const Ul = ({list}) => {
    return (
        <ul className="list" >
          {list.map((item,i) => <li key={i}>{item}</li> )}
        </ul>
    ) 
}

在 Chrome 中查看它，元素按预期呈现。

<ul class="list"></ul> 

在控制台中使用wrapper.debug()查看Enzyme生成的dom，组件渲染为：

    <Ul list={{...}}>
        <ul className="list" />
    </Ul>

我觉得这很奇怪，不知道为什么。

我的问题是我无法通过 UL 内没有“li”孩子的测试：

it('ul initially has no children', () => {
    const wrapper = mount(<App />);
    expect(wrapper.find('.list').children()).to.have.lengthOf(0);
    // const ul = wrapper.find('.list');
    // expect(ul).toHaveLength(0); 
})

我不断收到“TypeError: Cannot read property 'have' of undefined”，这让我觉得它没有找到

放在首位。

我只是错误地使用了 jest/enzyme api 吗？

Answer 1

方法不正确。

  expect(wrapper.find('.list').children()).to.have.lengthOf(0); 

真的应该：

  expect(wrapper.find('.list').children()).toHaveLength(0);