[英]How to test a custom hook event with Enzyme and Jest? (useKeyPress)
How to test a custom hook event with Enzyme and Jest?如何使用 Enzyme 和 Jest 测试自定义挂钩事件? (useKeyPress) (使用按键)
My current custom hook: (get keyboard user event and update keyPress)我当前的自定义挂钩:(获取键盘用户事件并更新 keyPress)
import React,{useEffect, useState} from 'react'
const useKeyPress = () => {
const [keyPress, setKeyPress] = useState('');
// If pressed key is our target key then set to true
const downHandler = (event) => {
setKeyPress(event.code);
}
const upHandler = () => {
setKeyPress('');
};
useEffect(() => {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
};
}, [])
return ([keyPress]);
}
export default useKeyPress;
Any Idea?任何的想法?
Thank's @Tom, I found a solution with the react testing library.谢谢@Tom,我找到了反应测试库的解决方案。
import useKeyPress from './../../src/component/useKeyPress/useKeyPress';
import { renderHook, act } from '@testing-library/react-hooks'
import {fireEvent} from '@testing-library/react'
test('Fire Enter keyboard event', () => {
const { result } = renderHook((() => useKeyPress()))
act(() => {
fireEvent.keyDown(window, { key: 'Enter', code: 'Enter' });
})
expect(result.current.keyPress).toBe('Enter');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.