如何测试React渲染功能的贴图结果？

Question

这就是我如何在我的react组件中返回一个Dropdown.Item元素数组。

render () {
  const { data } = this.props

  if (data) {
    return data.map((item, index) => {
      return <Dropdown.Item
        text={item.title}
        key={index}
      />
    })
  }
  return null
}

现在，我正在尝试测试返回的结果，但是我的测试失败，显示为recieved.length: 0 。 我认为问题正在返回地图...我该如何测试？

it('should render dropdown items', () => {
  wrapper = shallow(<Component data={data} />)
  expect(wrapper.find(Dropdown.Item)).toHaveLength(2)
})

我的数据如下：

[ { _id: '1', title: 'Item 1' }, { _id: '2', title: 'Item 2' } ]

---

更新资料

这为我工作：

expect(wrapper.at(0).find(Dropdown.Item)).toHaveLength(2)

但是为什么我必须使用at(0) ？

Answer 1

我想你可以做这样的事情。

class Component extends React.Component {
...
  render() {
  const { data } = this.props
  return (data.map((item, index) =>  <Dropdown text={item.title} key={index}/>));
  }
}
class Dropdown extends React.Component {
...
  render(){
  const {text, key} = this.props;

  return(
    <div>  
      <li className='test'>
        {text}
      </li> 
    </div>
   )
  }
}

describe('<MyComponent />', () => {
  it('renders two <Dropdown /> components', () => {
     const wrapper = shallow(<Component data={[{ _id: '1', title: 'Item 1' }, { _id: '2', title: 'Item 2' }]} />);
     expect(wrapper.find('Dropdown').to.have.length(2));
  });
});

使用to.have.length而不是toHaveLength ，检查酶文档参考： http : toHaveLength

另请参见酶文档中的“浅渲染”示例：

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

参考： https : //github.com/airbnb/enzyme/blob/HEAD/docs/api/shallow.md