测试React portals

测试React组件可能会变得非常复杂，特别是在处理portals时。虽然它们看起来令人生畏，但本质上它们只是一种在DOM中的不同位置渲染组件的方式。除此之外，在编写测试时，我们应该避免测试框架的内部实现。这显然也适用于React的内部实现。

将这两点结合起来，当我们测试React portals时，我们真正关心的只是portal化的输出是否正确。基于此，模拟portals应该并不难。我们只需要模拟ReactDOM.createPortal()来在指定位置渲染输入元素。以下是在Jest中的示例：

describe('MyComponent', () => {
  beforeAll(() => {
    ReactDOM.createPortal = jest.fn((element, node) => {
      return element;
    });
  });

  afterEach(() => {
    ReactDOM.createPortal.mockClear();
  });

  it('should render correctly', () => {
    const component = renderer.create(<MyComponent>Hello World!</MyComponent>);

    expect(component.toJSON()).toMatchSnapshot();
  });
});

这种模拟在大多数情况下都能正常工作，并有助于确保portal化的输出是正确的。然而，它也有一些注意事项。首先，被测试的DOM与应用程序的实际DOM不同。这可能会使测试变得不太健壮，降低对测试结果的信心。其次，可能会出现与使用portals相关的问题，例如portal节点丢失，必须单独进行测试。