有没有办法手动触发Material-UI模态关闭

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

有没有办法手动触发Material-UI模态关闭

Is there a way to trigger Material-UI Modal close manually

integration-testing

reactjs

jestjs

material-ui

react-testing-library