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.