有没有办法手动触发 Material-UI Modal 关闭答案

【问题标题】：Is there a way to trigger Material-UI Modal close manually有没有办法手动触发 Material-UI Modal 关闭
【发布时间】：2021-02-12 19:08:56
【问题描述】：

我使用 Popover 组件，它就像Modal。
我有一个这样的测试：

  test('should close popover when clicked two times', () => {
    userEvent.click(targetElem);
    let popover = screen.getByTestId('popover');
    document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape' }));
  });

我想关闭 Popover，但此代码无法正常工作。
如何在 jest、react-testing-library 中测试 popover 关闭案例？

【问题讨论】：

标签： reactjs jestjs material-ui integration-testing react-testing-library

【解决方案1】：

假设您有以下简单组件，其中包含一个在点击时触发Modal 的按钮。

import React, { useState } from 'react'
import Modal from '@material-ui/core/Modal'

const SimpleModal = () => {
    const [open, setOpen] = useState(false)

    const handleOpen = () => {
        setOpen(true)
    }
    const handleClose = () => {
        setOpen(false)
    }

    return (
        <div>
            <button type="button" onClick={handleOpen}>
                Open Modal
            </button>
            <Modal open={open} onClose={handleClose}>
                <h1>Text in Modal</h1>
            </Modal>
        </div>
    )
}

export default SimpleModal

一旦显示，您可以在模态本身上使用fireEvent.keyDown 模拟Escape 键事件，这将关闭模态。

test('should close modal when "Escape" key is pressed', () => {
    render(<SimpleModal />);
    fireEvent.click(screen.getByText('Open Modal'));
    expect(screen.getByText('Text in Modal')).toBeInTheDocument();
    fireEvent.keyDown(screen.getByText('Text in Modal'), {
      key: 'Escape',
      code: 'Escape'
    });
    expect(screen.queryByText('Text in Modal')).not.toBeInTheDocument();
});

【讨论】：