使用酶

Question

.MAP函數內部測試JSX所以說我有這個表：

<table> 
    <thead> 
    <tr> 
     <th>cat name</th> 
    </tr> 
    </thead> 
    <tbody> 
    {cats.map(cat => { 
     return (
     <tr key={cat.id}> 
      <td styleName="table-item">{ cat.name }</td> 
     </tr> 
    ); 
    })} 
    </tbody> 
</table> 

我如何去用酶測試地圖功能裏面的JSX？

我能夠精細測試它的其他部分，像這樣：

describe('<CatsTable />',() => { 
    const wrapper = mount(
    <CatsTable cats={cats} /> 
); 

    it('renders correctly',() => { 
    expect(wrapper.find('table')).to.have.length(1); 
    expect(wrapper.find('tbody')).to.have.length(1); 
    }); 
}); 

但如果我嘗試與地圖功能裏面有什麼是一回事，它返回undefined

Answer 1

可以使用下面的代碼來測試映射功能

describe('<CatsTable />',() => { 
    const wrapper = mount(
    <CatsTable cats={cats} /> 
); 

    it('renders child correctly',() => { 
     expect(wrapper.find('tbody').children()).to.have.length(cats.length); 
     expect(wrapper.find('tbody').children().find('tr')).to.have.length(cats.length); 

    }); 

你可以閱讀更多關於如何在這裏它的文檔中使用酶表裏面的其他部位