Styled component + storybook crashes the snapshots

Describe the bug Running yarn test causes all my tests to crash on components that use styled components

To Reproduce Steps to reproduce the behavior:

1. CRA setup
2. Add storybook
3. Run the snapshots for a component
4. Crashes…

Expected behavior Shouldn’t crash.

Code snippets

The custom .babelrc added because I’m using context to load all the .story.js files.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "env": {
        "test": {
            "plugins": ["require-context-hook", "babel-plugin-styled-components"]
        }
    }
}

Storybook config

import { configure } from '@storybook/react';
import 'react-chromatic/storybook-addon';

const req = require.context('../src/components', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

A component that crashes:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components'

const Card = ({ children, size }) => (
    <CardContainer size={size} >
        {children}
    </CardContainer>
)
const CardContainer = styled.div`
  border: 1px solid grey;
  border-radius: 5px;
  padding: 20px;
  width: ${props => props.size === 'fixed' ? '200px' : 'auto'}
`

Card.propTypes = {
    children: PropTypes.node
}

export default Card;

The error that occurs:

 console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
      The above error occurred in the <Context.Consumer> component:
          in StyledComponent (created by styled.input)
          in input (at input.stories.js:17)

      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  ● Storyshots › Input › default
    TypeError: chunk is not a constructor
      at flatten (node_modules/styled-components/dist/styled-components.cjs.js:1288:29)
      at flatten (node_modules/styled-components/dist/styled-components.cjs.js:1267:16)
      at ComponentStyle.generateAndInjectStyles (node_modules/styled-components/dist/styled-components.cjs.js:1474:19)
      at StyledComponent.generateAndInjectStyles (node_modules/styled-components/dist/styled-components.cjs.js:2136:36)
      at StyledComponent.renderInner (node_modules/styled-components/dist/styled-components.cjs.js:2043:33)
      at renderInner (node_modules/styled-components/dist/styled-components.cjs.js:1936:35)
      at updateContextConsumer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7275:19)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7441:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10876:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10686:5)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11273:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11301:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11312:10)
      at create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11828:5)
      at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/frameworks/react/renderTree.js:20:16)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:21:18
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:39:33)

[Pixelatex]

I managed to fix this I think. I’ll update it this week when I’m back at work with the issue/fix/etc

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!