时间戳

首页 > 解决方案 > 如何测试 Material-UI Popover 关闭实现

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

问题描述

我想确保我的Popover元素与触发按钮的实现按预期工作。我无法进行工作测试来断言用户按下 esc 后 Popover 已关闭。我能够使用 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();
});

标签： reactjsjestjsmaterial-uiintegration-testingreact-testing-library

解决方案

正如@juliomalves 所建议的，将最后一个包装expect在一个waitFor更正的测试中：

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

推荐阅读