Как проверить реагирующий хук, который может иметь ссылку на элемент HTML, переданный ему

Question

У меня есть пользовательский хук, которому может быть передан необязательный ref как свойство объекта, который хук принимает в качестве аргумента:

export const useShortcuts = ({ ref }) => {
  useEffect(() => {
    const trapper = new mousetrap(ref.current);

Код работает, но я сейчас пытаюсь написать тесты для этого, используя react-testing-library и библиотека @testing-library/act-hooks.

Я использую renderHook из @testing-library/act-hooks, но я не знаю, как создать ссылку или смоделировать ссылку вне компонента.

  it('should create shortcuts with no ref', () => {
    const ref = ?????  // how do I do this

    const { result } = renderHook(() => useShortcuts({ ref }), {
      initialProps: true
    });
  });

Answer 1

Вы можете создавать ссылки с React.createRef

const ref = React.createRef()

Полный рабочий пример ниже

import React, { useEffect } from 'react'
import { renderHook } from '@testing-library/react-hooks'

const useShortcuts = ({ ref }) => {
  useEffect(() => {
    ref.current = 1
  }, [])
}


it('works', () => {
  const ref = React.createRef()

  const { result } = renderHook(() => useShortcuts({ ref }))
  expect(ref.current).toEqual(1)
})

Answer 2

Безопасный для типов способ сделать это (поскольку в TypeScript createRef возвращает объект только для чтения) состоял бы в том, чтобы просто отказаться от createRefидея и просто создать объект с currentимущество:

      it('should create shortcuts with no ref', () => {
  const ref = { current: undefined }

  const { result } = renderHook(() => useShortcuts({ ref }), {
    initialProps: true
  });
});

Или, если вы хотите передать элемент:

      const elem = document.createElement('div');
const ref = { current: elem };

Последнего должно хватить в качестве типа для TypeScript, если хук ожидает:

      ref: React.RefObject<HTMLElement>