React-testing-library 测试 Ant Design 模式

Question

我有一个 React 组件，里面有 Ant Design Modal，我正在尝试测试当单击按钮时模态是否打开：

组件：

const ModalComponent = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal
        title="Modal title"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </>
  );
};

测试文件：

test('modal opening', async () => {
  const { queryByText } = render(<ModalComponent />);

  fireEvent.click(queryByText('Open Modal'));

  await waitFor(() => expect(queryByText('Modal title')).toBeInTheDocument());
});

问题是当我尝试调试时，模态 DOM 永远不会在测试中呈现，因此测试失败。发生这种情况的原因可能是模态内容是在 body 标记内的组件 DOM 树外部创建的？

Answer 1

我们这边没有提供任何测试失败的信息。

我这边提供了一些关于Antd modal组件的信息。

测试期间的 Antd Modal 在container. 这是因为 Antd 使用该 rc-dialog组件，并且该组件使用 React Portal 来显示模态，该模态始终在rootdiv 外部渲染。同样，在测试过程中，模态不会在容器中渲染，而是在容器外部渲染。

您给出的测试将会pass（模式存在），因为它将搜索不在容器内部的queryByText元素。document.body

test('modal opening', async () => {
  const { baseElement, queryByText } = render(<ModalComponent />);

  fireEvent.click(queryByText('Open Modal'));

  expect(baseElement).toMatchSnapshot(); // added snapshot

  await waitFor(() => expect(queryByText('Modal title')).toBeInTheDocument());
});

baseElement将显示 中存在的所有元素document.body。