Skip to content

Test with svg as ReactComponent failed with React 19 #17113

Open

Description

@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

Activity

  1. alfiemartin commented on Aug 22, 2025

    @alfiemartin

    Any update ?

  2. agnieszkaac commented on Sep 4, 2025

    @agnieszkaac

    This is an issue for me as well. Did anyone find any solution for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions