Skip to content

Test with svg as ReactComponent failed with React 19 #17113

@AlekseyManetov

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

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