使用 Enzyme 在 .map 函数中测试 JSX答案

【问题标题】：Testing JSX inside .map function using Enzyme使用 Enzyme 在 .map 函数中测试 JSX
【发布时间】：2016-11-15 01:40:40
【问题描述】：

所以说我有这张桌子：

 <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>

如何用酶测试map函数中的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);
  });
});

但如果我对 map 函数中的内容尝试相同的操作，它会返回 undefined

【问题讨论】：

标签： javascript reactjs mocha.js enzyme

【解决方案1】：

你可以使用下面的代码来测试map函数里面表格的其他部分

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);

  });

您可以在此处http://airbnb.io/enzyme/docs/api/ 的文档中阅读有关如何使用酶的更多信息

【讨论】：