Testing JSX inside .map function using Enzyme

问题

So say i have this 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>

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

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

回答1:

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

  });

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

来源：https://stackoverflow.com/questions/40600706/testing-jsx-inside-map-function-using-enzyme