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

Question

所以说我有这个 table:

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

但是，如果我尝试使用地图函数中的内容进行同样的操作，它 returns undefined

Answer 1

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

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/

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

Testing JSX inside .map function using Enzyme

javascript

mocha.js

reactjs

enzyme