OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Warning when testing a reactjs component which needs a ref from its parent component in jestjs

  • Thread starter Thread starter Holger
  • Start date Start date
H

Holger

Guest
I am trying to write a test in jest for a react component. In this component I use a ref, which exposes the parent element inside the component.

In this way I can react on size changes of the parent in the component and do some magic.

Code:
const ChildComponent = ({parentRef}) => {
    ...variable declaration
    
    // do something when there are changes in
    useEffect(() => {
        
        let parentOffSet = parentRef.current.offsetWidth
        
        ... do some more things
        
    }, [parentRef])
    
    ... more content
}

This component is used in this way

Code:
import {useRef } from "react";
const ParentComponent = () => {

    const currentRef = useRef(null);
    return(
        <div ref={currentRef
            <ChildComponent />
        </div>
    );
}

Now I would like to test my ChildComponent in jest.

Code:
it('reders component'){
    const testRef = {current: {offsetWidth: 600}};
    render(<ChildComponent parentRef={testRef} />);
}

This test passes, but gives me a warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I tried to modify my test e.g. via wrapping the <ChildComponent /> in another component in the test

Code:
const TestComponent = () => {
    const testRef = useRef();
    return(
        <div ref={testRef}>
            <ChildComponent parentRef={testRef} />
        </div>
    );
}; 

it('reders component'){
    render(<TestComponent />);
}

But this gives the same warning.

I did a search for the last couple of days on how to resolve the warning method.

Most of the time the answers I found are on the subject of how to test a ref within the component that is testet via a 'mock' here or here.

Or if a ref has a certain state.

But I did not find any answer on how to solve my Problem.

The error message states that there might be a forwardRef involved. However, as far as I understand a forwardRef this would be the other way arround: let the <ChildComponent> be exposed to the <ParentComponent /> via a ref.

Is there a workable way of testing such a component in jest and get rid of the warning?

<p>I am trying to write a test in jest for a react component. In this component I use a <code>ref</code>, which exposes the parent element inside the component.</p>
<p>In this way I can react on size changes of the parent in the component and do some magic.</p>
<pre><code>const ChildComponent = ({parentRef}) => {
...variable declaration

// do something when there are changes in
useEffect(() => {

let parentOffSet = parentRef.current.offsetWidth

... do some more things

}, [parentRef])

... more content
}
</code></pre>
<p>This component is used in this way</p>
<pre><code>import {useRef } from "react";
const ParentComponent = () => {

const currentRef = useRef(null);
return(
<div ref={currentRef
<ChildComponent />
</div>
);
}
</code></pre>
<p>Now I would like to test my ChildComponent in jest.</p>
<pre><code>it('reders component'){
const testRef = {current: {offsetWidth: 600}};
render(<ChildComponent parentRef={testRef} />);
}
</code></pre>
<p>This test passes, but gives me a warning:</p>
<p><code>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</code></p>
<p>I tried to modify my test e.g. via wrapping the <code><ChildComponent /></code> in another component in the test</p>
<pre><code>const TestComponent = () => {
const testRef = useRef();
return(
<div ref={testRef}>
<ChildComponent parentRef={testRef} />
</div>
);
};

it('reders component'){
render(<TestComponent />);
}

</code></pre>
<p>But this gives the same warning.</p>
<p>I did a search for the last couple of days on how to resolve the warning method.</p>
<p>Most of the time the answers I found are on the subject of how to test a <code>ref</code> within the component that is testet via a 'mock' <a href="https://stackoverflow.com/a/58790279">here</a> or <a href="https://stackoverflow.com/a/61789113">here</a>.</p>
<p>Or if a <code>ref</code> has a <a href="https://stackoverflow.com/q/68100693/2381164">certain state</a>.</p>
<p>But I did not find any answer on how to solve my Problem.</p>
<p>The error message states that there might be a <a href="https://react.dev/reference/react/forwardRef" rel="nofollow noreferrer">forwardRef</a> involved. However, as far as I understand a <code>forwardRef</code> this would be the other way arround: let the <code><ChildComponent></code> be exposed to the <code><ParentComponent /></code> via a <code>ref</code>.</p>
<p>Is there a workable way of testing such a component in jest and get rid of the warning?</p>
 

Latest posts

Top