我可以帮您翻译,以下是翻译结果:
我正在尝试使用Jest、Enzyme编写有关React hooks中的useEffect和useCallback的单元测试用例,但我无法成功。有人能帮我为下面的代码编写一个测试用例吗?
ModalComponent.jsx
const ModalComponent = ({ closeModal }) => {
const handleModal = useCallback((event) => {
if (event.keyCode === 27) {
closeModal(false);
}
}
useEffect(() => {
document.addEventListener('keydown', handleModal);
return () => document.removeEventListener('keydown', handleModal);
}, []);
return (
<Modal>
<Header onClose={closeModal} />
<Body />
<Footer />
</Modal>
);
}
ModalComponent.spec.jsx
describe('Modal Component', () => {
let props;
beforeEach(() => {
props = {
closeModal: jest.fn(),
};
};
it('should handle useEffect', () => {
jest.spyOn(React, 'useEffect').mockImplementation(f => f());
document.addEventListener('keydown', handleModal);
document.removeEventListener('keydown', handleModal);
const component = shallow(<ModalComponent />);
});
});
无法覆盖这些代码行:document.addEventListener('keydown', handleModal);
,document.removeEventListener('keydown', handleModal);
, if(event.keyCode === 27)
, closeModal(false)
。如何覆盖测试用例?
jest.spyOn(React, 'useEffect').mockImplementation(f => f());
- Kumar Pranaykeydown
事件,或者至少监视/模拟document
方法并断言它们的调用。 - Estus Flaskwrapper.find('input').simulate('keypress', {key: 'Enter'})
。但是在我的情况下,我无法将输入或其他元素传递给find
方法,所以你能指导我如何解决这个问题吗? - Kumar PranaydispatchEvent
?我的意思是,如果我们像这样从React.useEffect()
返回函数来卸载它,那么React.useEffect()
也会被卸载,对吗?所以,我把我的测试写成了这样。 - Kumar Pranay