如何使用Enzyme和Jest测试自定义挂钩事件?(使用按键)

Question

如何使用Enzyme和Jest测试自定义挂钩事件？(使用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;

有什么想法吗？

Answer 1

谢谢@Tom，我找到了一个带有react测试库的解决方案。

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