如何测试 Material-UI Popover 关闭实现

Question

我想确保我的 Popover 元素结合触发按钮的实现能按预期工作。我无法进行工作测试来断言 Popover 在用户按下 esc 后关闭。我能够使用 Modal 进行此测试，但我必须在当前项目中使用 Popover。

组件代码：

import {
    Button, Popover,
} from '@mui/material';
import React from 'react';

export default function SimpleModal() {
    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'user-menu' : undefined;

    return (
        <>
            <Button
                aria-controls={id}
                aria-haspopup="true"
                onClick={handleClick}
            >
                Open Modal
            </Button>

            <Popover open={open} onClose={handleClose}>
                    <h1>Text in Modal</h1>
            </Popover>
        </>
    );
}

测试文件代码：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SimpleModal from './SimpleModal';

test('should close when esc key is pressed', async () => {
    render(<SimpleModal />);
    userEvent.click(screen.getByText('Open Modal'));
    expect(screen.getByText('Text in Modal')).toBeInTheDocument();
    userEvent.keyboard('{esc}');
    await expect(screen.queryByText('Text in Modal')).not.toBeInTheDocument();
});

Answer 1

，将最后一个 expect 包裹在 waitFor 中更正了测试：

await waitFor(() => expect(...));

如何测试 Material-UI Popover 关闭实现

How to test Material-UI Popover close implementation

integration-testing

reactjs

jestjs

material-ui

react-testing-library