如何使用 Enzyme 和 Jest 测试自定义钩子事件？ （使用KeyPress）

大佬教程收集整理的这篇文章主要介绍了如何使用 Enzyme 和 Jest 测试自定义钩子事件？ （使用KeyPress），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用 Enzyme 和 Jest 测试自定义钩子事件？ （使用KeyPress）？

如何使用 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;

有什么想法吗？

解决方法

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

大佬总结

以上是大佬教程为你收集整理的如何使用 Enzyme 和 Jest 测试自定义钩子事件？ （使用KeyPress）全部内容，希望文章能够帮你解决如何使用 Enzyme 和 Jest 测试自定义钩子事件？ （使用KeyPress）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。