如何访问并测试yet-another-react-lightbox生成的root div外元素？

当使用yet-another-react-lightbox库时，灯箱元素会挂载到body下、root容器之外，导致常规测试查询（默认只在组件挂载的root范围内查找）无法捕获。可以通过以下方法访问这些元素：

1. 显式指定查询范围为document.body #

React Testing Library的screen.getBy*、screen.queryBy*等方法支持通过container参数指定查询的根容器，直接传入document.body即可覆盖整个页面范围：

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

test('点击按钮后灯箱正常打开', async () => {
  render(<YourComponent />);

  // 触发打开灯箱的操作
  const openBtn = screen.getByText('打开灯箱');
  fireEvent.click(openBtn);

  // 等待灯箱元素渲染完成，并在body范围内查询
  await waitFor(() => {
    // 用role查询（推荐，符合可访问性测试规范）
    const lightboxDialog = screen.getByRole('dialog', { container: document.body });
    expect(lightboxDialog).toBeInTheDocument();
  });
});

2. 直接通过document查询元素 #

如果知道灯箱的特定类名（比如yet-another-react-lightbox的根元素类名为yarl__root），可以直接通过document.body.querySelector来定位：

await waitFor(() => {
  const lightboxRoot = document.body.querySelector('.yarl__root');
  expect(lightboxRoot).not.toBeNull();
});

3. 注意异步渲染的等待 #

灯箱的挂载可能伴随动画或异步逻辑，务必用waitFor包裹断言，确保元素完全渲染到DOM中后再进行验证。

内容的提问来源于stack exchange，提问作者Daniel Benisti