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

Question

我使用 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 close case？

Answer 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();
});