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

Answer 1

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