使用Headless UI组件时，如何在React Testing Library中Mock Document.getElementById？

使用Headless UI的Dialog、Transition组件时，用React Testing Library编写测试用例出现错误：

Cannot read properties of null (reading 'getElementById')

测试代码如下：

describe('Testing Component', () => {
  test('It should render component', () => {
    render(
      <Edit
        form={form}
        phoneNumber={phoneNumber}
        appId={appId}
      />,
    );
    const isItRendered = screen.getByTestId('lending_editAPP');
    expect(isItRendered).toBeInTheDocument();
  });
});

这个错误是因为Headless UI的Dialog/Transition组件会尝试调用document.getElementById获取指定挂载容器，但测试环境中该容器不存在，导致返回null进而报错。可以通过Mock该方法解决，具体有两种方式：

方式一：全局Mock（适用于所有测试用例） #

在测试文件顶部或者测试全局setup文件中添加Mock逻辑：

// 创建一个模拟的DOM元素
const mockElement = document.createElement('div');
// 替换document.getElementById，让它始终返回这个模拟元素
jest.spyOn(document, 'getElementById').mockReturnValue(mockElement);

方式二：单个测试用例内Mock（仅影响当前测试） #

在目标测试用例中单独Mock，测试结束后可恢复原方法避免影响其他测试：

describe('Testing Component', () => {
  test('It should render component', () => {
    // 创建模拟容器
    const mockContainer = document.createElement('div');
    // 保存原方法
    const originalGetElementById = document.getElementById;
    // 临时替换getElementById
    document.getElementById = jest.fn().mockReturnValue(mockContainer);

    render(
      <Edit
        form={form}
        phoneNumber={phoneNumber}
        appId={appId}
      />,
    );
    
    const isItRendered = screen.getByTestId('lending_editAPP');
    expect(isItRendered).toBeInTheDocument();

    // 恢复原方法
    document.getElementById = originalGetElementById;
  });
});

注意事项 #

• 如果Headless UI组件需要容器具备特定方法（比如appendChild），无需额外处理，默认创建的div元素已包含这些基础DOM方法。
• 若项目使用vitest替代jest，只需将jest.spyOn替换为vi.spyOn，其他逻辑保持一致。

内容的提问来源于stack exchange，提问作者Akshay S R