如何測試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