Is there a way to test that sub-components/children of React element are not crossing the parent outline?
For example:
in the above picture, the test should fail as the child is crossing the outline of the parent
Code Sandbox with the components
Note:
Using the element .getBoundingClientRect() return 0 for all properties (top, bottom, left, right, etc...)
You can use intersectionObserver which will fire an event when the child get in the viewport of the parent. actually there is a react wraper for it react-intersection-observer
This isn't something you can unit test via CLI/test runner, the components necessarily need to be rendered into a "live" view, not into any virtual DOM, like jsdom used by many unit test runners. Note that even jest snapshots compare only the DOM structure and not the computed view.
This also would not be considered a unit test since you are now testing how two components (units) interact (integrate) with one another.
For this you'll need something like cypress, selenium, or puppeteer to run an integration test and measure the rendered DOM.
