我使用 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?
最佳答案
假设您有以下带有按钮的简单组件,该按钮在点击时触发 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();
});
关于reactjs - 有没有办法手动触发 Material-UI Modal 关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66177698/