use-focus.test.ts

/**
 * @jest-environment jsdom
 */

import { act }        from '@testing-library/react'
import { renderHook } from '@testing-library/react'

import { useFocus }   from './use-focus.hook'

describe('Use focus hook', () => {
  it('should change focus', () => {
    const { result } = renderHook(() => useFocus())

    act(() => result.current.focusProps.onFocus())

    expect(result.current.focus).toBeTruthy()

    act(() => result.current.focusProps.onBlur())

    expect(result.current.focus).toBeFalsy()
  })
})

import { useState } from 'react'

export const useFocus = () => {
  const [focus, setFocus] = useState<boolean>(false)

  const focusProps = {
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
  }

  return { focus, focusProps }
}