reactjs - Testa en anpassad react-hook som innehåller en ref


Jag försöker för närvarande testa mina egna hookar med renderHook från test-library/react-hooks.

Jag har en hook med en React-ref inuti :

function useSize<T extends HTMLElement> (): [React.Ref<T>, DOMRect | undefined] {

    const [size, setSize] = useState<DOMRect>()
    const ref = useRef<T | null>(null)

    console.log(ref.current, size)

    useLayoutEffect(() => {
        setSize(ref?.current?.getBoundingClientRect())
    }, [ref])

    // keep an eye on element size and call a callback when changes occur
    useResizeObserver(ref,(dimensions) => setSize(dimensions.contentRect))

    return [ref, size]
}

Jag försöker ställa in ref-värdet för att utlösa useLayoutEffect och få ett värde för storlek.

Jag försökte genom att skriva detta test :

test('useClick returns the size of given element', () => {
    let div = document.createElement("div")
    document.body.append(div)
    const hook = renderHook(() => useSize())
    act(() => {
        hook.result.current[0] = { current : div }
    })
    hook.rerender(true)
    console.log(hook.result.current[1])
})

Tyvärr returnerar det undefined.

P.S: Jag vet att jag måste mocka getBoundingClientRect för att få konsekventa värden, men först vill jag bara få ett värde.