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

【问题标题】：Test if children of react element are not crossing the parent outline测试 react 元素的子元素是否没有越过父轮廓
【发布时间】：2021-08-23 23:42:23
【问题描述】：

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

例如：

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

注意：

使用元素 .getBoundingClientRect() 返回 0 用于所有属性（top、bottom、left、right 等...）

【问题讨论】：

这不是您可以在终端中进行单元测试的东西，组件必须以非虚拟方式呈现到视图中。这甚至不是单元测试，因为您正在测试两个组件（单元）如何相互交互（集成）。为此，您需要 cypress 或 puppeteer 之类的东西来运行集成测试并测量渲染的 DOM。
是的，我认为这可能是答案，但我希望我错了……
@DrewReese 您可以发表您的评论作为答案，我可以将其标记为已解决

【解决方案1】：

这不是您可以通过 CLI/test runner 进行单元测试的东西，组件必须呈现为“实时”视图，而不是任何虚拟 DOM，例如许多单元测试运行器使用的jsdom。请注意，即使是开玩笑的快照也只比较 DOM 结构而不是计算视图。

这也不会被视为单元测试，因为您现在正在测试两个组件（单元）如何相互交互（集成）。

为此，您需要 cypress、selenium 或 puppeteer 之类的东西来运行集成测试并测量渲染的 DOM。

【讨论】：

【解决方案2】：

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

【讨论】：