如何测试反应渲染函数的映射结果？

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，检查酶docs ref：http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

另见酶docs的Shallow Rendering示例：

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

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