Test with svg as ReactComponent failed with React 19

[AlekseyManetov]

Describe the bug

When running a test that renders a component importing an SVG as a ReactComponent (e.g. import { ReactComponent as Logo } from './logo.svg';), the test fails with the following error:

A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

If I render any other element (not the SVG), the test passes. This only happens when rendering the SVG as a ReactComponent.

Steps to reproduce

Steps to reproduce the behavior:

1. Create a new CRA app (npx create-react-app my-app --template typescript)
2. Use the following App.tsx:

   import React from 'react';
   import { ReactComponent as Logo } from './logo.svg';
   
   function App() {
     return <Logo />;
   }
   
   export default App;

3. Use the following App.test.tsx:

   import React from 'react';
   import { render } from '@testing-library/react';
   import App from './App';
   
   test('renders logo', () => {
     render(<App />);
   });

4. Run npm test

Expected behavior
The test should pass, and the SVG should be rendered without errors.

---

Actual behavior
The test fails

---

System info:
OS: macOS 14.5
Node version: 22.17.0
npm version: 10.9.2
react-scripts version: 5.0.1
react version: 19.1.0

Reproducible demo

Here the codesandbox with installed from scratched CRA with TS.
How to run:

• cd my-app && npm test