Jest - `Cannot create styled-component for component: undefined`

Question

I'm running into the following error when testing my application using jest:

 FAIL  
  ● Test suite failed to run

    Cannot create styled-component for component: undefined.

      30 |
      31 | 
    > 32 | export const BackgroundVector = styled(Background)`
         |                                 ^
      33 |   position: fixed;
      34 |   left: 0;
      35 |   bottom: 0;

Background is an svg that I imported at the top of this file as follows:

import { ReactComponent as Background } from '../images/Background.svg';

I'm not quite sure how to get around this error. In my package.json, I have mapped SVG files to a fileMock.js which is just module.exports = 'test-file-stub';. Is there anything else I should do to resolve this?

louielyl · Accepted Answer · 2022-10-09T03:03:31.560

12

You could try the following:

export const BackgroundVector = styled(props => <Background {...props}/>)`
  //Your styles here
`

This solved my problem.

edited Oct 09 '22 at 03:03

answered May 26 '22 at 03:37

louielyl

745
7
9

score 0 · Answer 2 · answered Aug 28 '23 at 05:16

I encountered the same issue. To debug it, I added a console log just above the line where I was getting the error. Sure enough, the component was undefined. The issue turned out to be an incorrectly defined alias in babel.config.js. After correcting the alias setup in babel.config.js, everything worked as expected. What confuses me, however, is why the project ran successfully with the incorrect alias; the error only appeared when using Jest.

score 0 · Answer 3 · answered Aug 29 '23 at 14:36

0

my problem too and with jest i thought it was a circular dependency but it shouldn't even render.

answered Aug 29 '23 at 14:36

maycon silva

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 31 '23 at 08:26
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34916615) – Yaroslavm Aug 31 '23 at 08:55

Jest - `Cannot create styled-component for component: undefined`

3 Answers3