Jest Throws A Warning - ValidateDOMNesting(...): Cannot Appear ...

Skip to content Dismiss alert {{ message }} / react-testing-library Public
  • Notifications You must be signed in to change notification settings
  • Fork 1.1k
  • Star 19k
  • Code
  • Issues 47
  • Pull requests 5
  • Actions
  • Security
  • Insights
Additional navigation options New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom Jest throws a warning - validateDOMNesting(...): <td> cannot appear as a child of <div>. #515 Closed karthikvt26 opened this issue Oct 30, 2019 · 2 comments Closed Jest throws a warning - validateDOMNesting(...): <td> cannot appear as a child of <div>. #515 karthikvt26 opened this issue Oct 30, 2019 · 2 comments

Comments

@karthikvt26 Copy link

karthikvt26 commented Oct 30, 2019

  • 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.

DeepinScreenshot_select-area_20191030155826

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:

👍 2 barrymichaeldoyle and tiagobarros01 reacted with thumbs up emoji All reactions
  • 👍 2 reactions
@connormeredith Copy link

connormeredith commented Oct 30, 2019

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();
👍 18 miku86, markplindsay, lucas123ho, house9, wdonet, markcnunes, tuananh051693, saddacracker, janbarasek, mildc055ee, and 8 more reacted with thumbs up emoji 🎉 7 tuananh051693, digitter, janbarasek, rctreinta, bridgetcuevas, soaresw2, and jackiewmacharia reacted with hooray emoji 🚀 4 lucas123ho, janbarasek, rctreinta, and soaresw2 reacted with rocket emoji All reactions
  • 👍 18 reactions
  • 🎉 7 reactions
  • 🚀 4 reactions
@kentcdodds Copy link Member

kentcdodds commented Oct 30, 2019

Thanks @connormeredith!

All reactions @kentcdodds kentcdodds closed this as completed Oct 30, 2019 Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees No one assigned Labels None yet Projects None yet Milestone No milestone Development

No branches or pull requests

3 participants @kentcdodds @connormeredith @karthikvt26 You can’t perform that action at this time.

Từ khóa » Html Cannot Appear As A Child Of Div