Storybook: Styled component + storybook crashes the snapshots

[Pixelatex]

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]

Update, removing the autoloading code with manual requires still throws the same issue:

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

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

function loadStories() {
  require('../src/stories/index.js');
  require('../src/components/Card/card.stories.js');
  require('../src/components/Input/input.stories.js');

  // req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

I am aware this seems to be more of an implementation issue rather than a bug but I cannot find any information on this and styled components work as intended in other things, it's only in storybook testing that it breaks.

[igor-dv]

Can you please share the test file ?

[Pixelatex]

Seems the origin of the issue is located here:

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

the prop variables are what's causing the issue.

[Pixelatex]

I think styled comp uses context to pass the props to the children and this might be what's causing the issue, this part of the error seems to support my findings :/

 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.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[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]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[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!