react-testing-library validateDOMNesting Error

Question

Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>.
    in tbody (created by TableBody)
    in TableBody (created by TableBody)
    in TableBody

Question:

How do I render my TableBody component a table element, instead of the default div that react-testing-library uses?

Supplemental Information:

I tried passing in options into the react-testing-library, render(), function but I can't seem to get it working.

I also tried digging around in the react-testing-library tests to find examples, but didn't find anything.

// react-testing-library

function render(
  ui: React.ReactElement<any>,
  options?: {
    /* You wont often use this, expand below for docs on options */
  },
): RenderResult

From the react-testing-library docs

You wont often need to specify options, but if you ever do, here are the available options which you could provide as a second argument to render.

container: By default, react-testing-library will create a div and append that div to the document.body and this is where your react component will be rendered. If you provide your own HTMLElement container via this option, it will not be appended to the document.body automatically.

baseElement: If the container is specified, then this defaults to that, otherwise this defaults to document.documentElement. This is used as the base element for the queries as well as what is printed when you use debug().

My testing code using Jest:

import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";

import TableBody from "../TableBody";
import listingDataMock from "../__mocks__/TableBody-listing-data";

afterEach(cleanup);

describe("TableBody", () => {
  test("Snapshot", () => {
    //Arrange--------------
    const listingData = listingDataMock;
    const tableBodyKey = "candidateId";

    const props = {
      listingData,
      tableBodyKey
    };

    const { container } = render(<TableBody {...props} />);

    //Assert---------------
    expect(container).toMatchSnapshot();
  });
});

render(<table><TableBody {...props} /></table>) is not an option for you? — Tholle
@Tholle Nice =) That does work! But I still hope to figure out how to use the options parameter too in the render function. — Duncan
Alright. Looking at the source it looks like container will be document.body.appendChild(document.createElement('div')) unless you specify it yourself. Have you tried render(<TableBody {...props} />, { container: document.body.appendChild(document.createElement('table')) }? — Tholle
@Tholle Ah, that works! Thanks! Now render(<table><TableBody {...props} /></table>) actually looks a lot less verbose for team members to grok the test =p If you add that as an answer, I'll select it. Thanks! — Duncan
Hehe, I agree with you. Might look a bit more readable with const table = document.createElement('table'); document.body.appendChild(table); render(<TableBody {...props} />, { container: table }); — Tholle

Tholle Tholle · Accepted Answer · 2018-07-07T00:02:05

You could use the default react-testing-library container and wrap your component with a table:

const { container } = render(<table><TableBody {...props} /></table>);

You could also create a table element and use that as container by passing it to the options:

const table = document.createElement('table');
document.body.appendChild(table);
const { container } = render(<TableBody {...props} />, { container: table });

react-testing-library validateDOMNesting Error

1 Answers