jestjsstyled-componentsbabel-jest

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

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?

Solution

  • You could try the following:

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

    This solved my problem.