React-testing-library: Jest throws a warning - validateDOMNesting(...): <td> cannot appear as a child of <div>.

[karthikvt26]

• react-testing-library version: 9.3.0
• react version: 16.9.0
• node version: 10.16.3
• npm (or yarn) version: 6.9.0 (npm)

Relevant code or config:

App is created using create-react-app, assuming it is using a default jest configuration

What you did:

const { container } = render(
    <td>Hello World</td>
);
expect(container).toBeTruthy();

What happened:

The above works but jest throws a warning because render seems to render the stuff inside a <div> -- in this case td ... inside a div.

Reproduction:

Problem description:

I am not sure if this is a problem. But looking forward to understand the behaviour and if it is intended and if yes would love to know the reason :)

Suggested solution:

[connormeredith]

Hi @karthikvt26, react-testing-library renders into a div by default but you can render your component inside another element instead: https://testing-library.com/docs/react-testing-library/api#container.

Something like:

const tableRow = document.createElement('tr');
const { container } = render(<td>foo</td>, {
    container: document.body.appendChild(tableRow)
});

expect(container).toBeTruthy();

[kentcdodds]

Thanks @connormeredith!