unexpected-react icon indicating copy to clipboard operation
unexpected-react copied to clipboard

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

Open salomvary opened this issue 5 years ago • 0 comments

This test

test('renders row', () => {
    const Row = () => (
      <tr>
        <td>Hello</td>
      </tr>
    );

    expect(
      <Row />,
      'to deeply render as',
      <tr>
        <td>Hello</td>
      </tr>
    );
  });

Prints this warning:

    console.error
      Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
          in tr (created by Row)
          in Row
          in StatelessWrapper

Workaround:

test('renders row', () => {
    const Row = () => (
      <tr>
        <td>Hello</td>
      </tr>
    );

    expect(
      <table>
        <tbody>
          <Row />
        </tbody>
      </table>,
      'to deeply render as',
      <table>
        <tbody>
          <tr>
            <td>Hello</td>
          </tr>
        </tbody>
      </table>
    );
  });

Could unexpected-react somehow improve the situation by

  1. supressing such warnings
  2. or allowing to control how the rendered nodes are wrapped?

salomvary avatar Oct 13 '20 09:10 salomvary