我可以在功能组件上使用 jest/rtl 模拟 ref 属性吗？

Question

I currently have a functional component with a helper function

function Component() {
    imgRef = useRef(null)     

    function helperFunction(node, ref) { 
        if (!ref || !ref.current) return; 
        ...do something    
    }     

    return (
       <Component onAlign={(node) => {helperFunction(node, imgRef)}>
           <img ref={imgRef} />
       </Component>
    )
}

And I can't seem to cover the edge case

if (!ref || !ref.current) return;

I've tried mocking the useRef to return null but it hasn't worked. Is there a way I would be able to test this or mock the ref property of the to null?

Answer 1

With RTL you can´t! As you can check on faq :

Help! I can't access component methods or the component instance! This is intentional.

We want you to focus on testing the output and functionality of the component as it is observed by the user and to avoid worrying about the implementation details of the component.

We believe this leads to less brittle and more meaningful test code.

Testing-library also have some guiding principles that you can check here .

And complementing the answer, Is there any chance that ref will be null when helperFunction is called? Checking your code over i believe its not possible as you are explicit setting <img ref={imgRef} /> . So maybe you just dont need this verification.

* Related to Jest, maybe you can force some mock on the Component. But again, you will be going against Guiding Principles from RTL.