使用Enzyme在.map函数中测试JSX [英] Testing JSX inside .map function using Enzyme

问题描述

所以说我有这张表：

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

How do i go about testing the jsx inside the map function with enzyme?

我可以测试其他部分，如下：

I am able to test the other parts of it fine, like so:

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

But if i try the same thing with what's inside the map function it returns undefined

推荐答案

您可以使用以下代码测试map函数内表的其他部分

You can use the following code to test other parts of the table inside the map function

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/酶/ docs / api /

You can read more on how to use enzyme on its documentation here http://airbnb.io/enzyme/docs/api/

这篇关于使用Enzyme在.map函数中测试JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！