-
-
Notifications
You must be signed in to change notification settings - Fork 27k
Open
Description
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:
- Create a new CRA app (
npx create-react-app my-app --template typescript
) - Use the following
App.tsx
:import React from 'react'; import { ReactComponent as Logo } from './logo.svg'; function App() { return <Logo />; } export default App;
- 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 />); });
- 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