Mocking refs in React function component

Question

I have React function component that has a ref on one of its children. The ref is created via useRef.

I want to test the component with the shallow ren

Answer 1

The solution from slideshowp2 didn't work for me, so ended up using a different approach:

Worked around it by

1. Introduce a useRef optional prop and by default use react's one

import React, { useRef as defaultUseRef } from 'react'
const component = ({ useRef = defaultUseRef }) => {
  const ref = useRef(null)
  return 
}

2. in test mock useRef

const mockUseRef = (obj: any) => () => Object.defineProperty({}, 'current', {
  get: () => obj,
  set: () => {}
})

// in your test
...
    const useRef = mockUseRef({ refFunction: jest.fn() })
    render(
      ,
    )
...