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, Commented Jul 6, 2018 at 23:21
@Tholle Nice =) That does work! But I still hope to figure out how to use the options parameter too in the render function. — Duncan
– Duncan, Commented Jul 6, 2018 at 23:31
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, Commented Jul 6, 2018 at 23:39
@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
– Duncan, Commented Jul 6, 2018 at 23:56
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, Commented Jul 6, 2018 at 23:58

Tholle · Accepted Answer · 2018-07-07 00:02:05Z

7

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

answered Jul 7, 2018 at 0:02

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-testing-library validateDOMNesting Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related