如何测试React元素的子组件/子元素未超出父元素的outline轮廓

默认outline-offset为0时，outline会紧贴父元素border外边缘绘制，子元素超出的判定规则如下：

• 子元素左边缘 < 父元素左边缘
• 子元素右边缘 > 父元素右边缘
• 子元素上边缘 < 父元素上边缘
• 子元素下边缘 > 父元素下边缘
  满足任意一条即判定为超出，测试不通过。

场景1：端到端测试（Playwright/Cypress） #

这类测试运行在真实浏览器内核中，不存在元素尺寸返回0的问题，可以直接调用框架封装的元素尺寸获取方法实现检测。

Playwright 示例代码 #

test('子元素不超出父元素outline', async ({ page }) => {
  await page.goto('你的测试页面地址');
  // 定位父、子元素
  const parent = page.locator('.parent-element');
  const child = page.locator('.child-element');
  
  // 获取元素边界坐标
  const parentBox = await parent.boundingBox();
  const childBox = await child.boundingBox();

  // 校验是否超出
  expect(childBox.x).toBeGreaterThanOrEqual(parentBox.x);
  expect(childBox.x + childBox.width).toBeLessThanOrEqual(parentBox.x + parentBox.width);
  expect(childBox.y).toBeGreaterThanOrEqual(parentBox.y);
  expect(childBox.y + childBox.height).toBeLessThanOrEqual(parentBox.y + parentBox.height);
});

场景2：Jest + React Testing Library 单元测试 #

针对jsdom环境下getBoundingClientRect返回全0的问题，可以使用支持度更稳定的offset属性实现判定：

import { render, screen } from '@testing-library/react';
import App from './App';

test('子元素不超出父元素outline', () => {
  // 将组件挂载到body下，提升尺寸属性准确性
  render(<App />, { container: document.body });
  
  const parent = screen.getByTestId('parent');
  const child = screen.getByTestId('child');

  // 判定是否超出
  expect(child.offsetLeft).toBeGreaterThanOrEqual(0);
  expect(child.offsetLeft + child.offsetWidth).toBeLessThanOrEqual(parent.offsetWidth);
  expect(child.offsetTop).toBeGreaterThanOrEqual(0);
  expect(child.offsetTop + child.offsetHeight).toBeLessThanOrEqual(parent.offsetHeight);
});

提示：如果offset属性返回值仍不符合预期，可手动mockgetBoundingClientRect方法，传入提前预设的元素坐标和尺寸完成测试。如果父元素设置了非0的outline-offset，需要把偏移值纳入计算，对应调整判定阈值即可。

内容的提问来源于stack exchange，提问作者Raz Luvaton