reactjs - 测试 react 元素的子元素是否没有越过父轮廓

Question

有没有办法测试 React 元素的子组件/子元素没有跨越父轮廓？

例如：

在上图中，测试应该失败，因为孩子正在穿过outline父母的

带有组件的代码沙箱

笔记：

对所有属性使用元素.getBoundingClientRect()返回（ , , , , 等...）0topbottomleftright

标签： reactjstestingreact-testing-library

Answer 1

您可以使用 intersectionObserver 当孩子进入父母的视口时触发一个事件。实际上有一个反应包装器react-intersection-observer