Question

我有一个自定义钩子，可以将可选的ref传递给它，作为该钩子作为参数的对象的属性：

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

代码有效，但是我现在正尝试使用react-testing-library和@testing-library/react-hooks库为此编写测试。

我正在使用@testing-library/react-hooks中的renderHook，但是我不知道如何创建引用或在组件外部模拟引用。

  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>

如何测试可以将html元素的引用传递给它的React钩子

2 个答案: