reactjs - react-testing-library 测试 Ant Design modal

Question

我有一个带有 Ant Design Modal 的 React 组件，我正在尝试测试当它单击按钮时该模态是否打开:

组件:

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

There is no test failure that you have given from our side.

关于 Antd modal 组件的一点信息。

测试期间的 Antd Modal 在 container 之外呈现。这是因为 Antd 使用了 rc-dialog 组件，并且该组件使用 react portal 来显示总是在 root div 之外呈现的模式。同理，在测试期间，modal 不会在容器内渲染，而是在容器外渲染。

您给出的测试将 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 中存在的所有元素。