React does not recognize the `fetchPriority` prop on a DOM element.

[AlaminPu1007]

• @testing-library/react version: 15.0.5
• react: 18
• next: 14.2.3

Relevant code :

  `page.test.tsx`

  it('to check a hello text is present', () => {
    render(<Home />);
    const heading = screen.getByText('Hello', { exact: false });
    expect(heading).toBeInTheDocument();
  });

page.tsx
// ..... other code
 <Image
       alt='user-avatar'
       src={'https://example.com'}
        width={350}
        height={350}
        className='object-cover'
        priority
    />
// ..... other code

Problem description:

When i run npm run test i got a warning.

onsole.error
    Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
        at img
..... other thing

[MatanBobi]

If I'm not mistaken here, this looks like a Next.js issue and not a React Testing Library issue. Found this one in Next.js that looks relevant: https://github.com/vercel/next.js/issues/65161

[vicasas]

Hi @MatanBobi!

In Next.js this has already been fixed at https://github.com/vercel/next.js/blob/a1f70ae2f3f82ea8f38ec2a73ac39eb70789d716/packages/next/src/client/image-component.tsx#L168.

The warning still appears when running tests when using "render". Could it be that "render" is generating the warning?

A little more information about it.

In minor versions of React 18.2, the accepted property is "fetchpriority", while in higher versions of React 18.3 it was changed to "fetchPriority".

We can also see that in @types/react in imgHTMLAttributes fetchPriority has been added (https://github.com/DefinitelyTyped/DefinitelyTyped/commit/3d04d26b2f978c78eb23f33a63d30b184b75f792).

All of the above is born from changes in React.

[MatanBobi]

Based on the fix you've referenced, it looks like Next "hack" this by changing the prop name. Since Next.js is a wrapper on top of React, that's sort-of OK for them to do it, but we're just calling render from ReactDOM without adding any logic on top of that so I'm really not interested in adding any logic there. From looking at the code, once you'll use React 19, this warning won't be logged so for now I believe we should remain with this approach. Regarding the types, @types/react is a peer dependency for RTL so upgrading that will get you the TS support. Sorry if that's not the answer you were looking for and hope you'll understand where we come from.