javascript - 使用 Enzyme 和 Jest 无法通过 'li' 中没有 'ul' 的测试

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” child :

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:无法读取未定义的属性‘have’”，这让我觉得它首先没有找到

。

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

Answer 1

方法不对。

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

应该真的:

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