开玩笑 - 在 React 中测试模态会出错

Question

我正在使用 react-test-renderer 和 Jest 来测试反应组件。但是如果我像这样测试一个 react-mui 模态对话框：

describe('Dashboard', function () {
  let dashboard;
  beforeEach(async () => {
    testRenderer = TestRenderer.create(<MemoryRouter><Route component={Dashboard} /></MemoryRouter>);
    dashboard = testRenderer.root.findByType(Dashboard);
    await waitForExpect(() => expect(dashboard.instance.state.hasLoaded).toBeTruthy());
  });


  it('opens dialog on clicking the new class', async () => {
    const button = testRenderer.root.findByType(Button);
    expect(dashboard.instance.state.showDialog).toBeFalsy();
    button.props.onClick();
    expect(dashboard.instance.state.showDialog).toBeTruthy();
  });
});

但是，然后我得到一个错误：

错误：失败：“错误：未捕获'警告：无效容器已 被提供。这可能表明正在使用另一个渲染器 除了测试渲染器。 （例如，ReactDOM.createPortal 在 ReactTestRenderer 树内。）不支持。%s'

我应该如何测试然后响应门户以使该测试正常工作？

Answer 1

试着把它放在你的测试中：

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

Answer 2

基于 Oliver 的回答，但针对 TypeScript 用户：

describe("Tests", () => {
  const oldCreatePortal = ReactDOM.createPortal;
  beforeAll(() => {
    ReactDOM.createPortal = (node: ReactNode): ReactPortal =>
      node as ReactPortal;
  });

  afterAll(() => {
    ReactDOM.createPortal = oldCreatePortal;
  });
});