validateDOMNesting warning with a <tr>-based component using Enzyme.mount

Question

I have a component with a <tr> as the base element and it renders fine. But when I try to test it using mount, I get a warning:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

Here's a reproduction:

import React, {Component} from 'react';
import {mount} from 'enzyme';

class Foo extends Component {
  render() {
    return (
      <tr>
        <td>moo</td>
      </tr>
    )
  }
}

it('should not fail', () => {
  const wrapper = mount(<Foo />);
  console.log(wrapper.html());

});

In the call to mount, I can wrap the component with <table><tbody><Foo /></tbody></table> to make the warning go away. But it feels like there should be another way to do it since this warning doesn't happen with shallow or in the application itself.

This is with:

• React 16.5.2
• Enzyme 3.7.0

Answer 1

here is the way to fix it

it('should not fail', () => {
  const wrapper = mount(<Foo />, {
    attachTo: document.createElement('tbody'),
  });
  console.log(wrapper.html());
});