title: Enzyme render styled component with theme
body: <p>I am using <code>react</code> with <code>styled-components</code>, and <code>jest</code> <code>enzyme</code> for my tests. I'm having troubles testing a themed component that keeps erroring because of the <code>theme</code> from <code>styled-components</code>.</p>
  
  <p>My component is:</p>
  
  <pre><code>const Wrapper = styled.header`
    position: fixed;
    top: 0;
    left: 0;
  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  
    width: 100%;
    height: 64px;
  
    background-color: ${({ theme }) =&gt; theme.colors.main.default};
    color: ${({ theme }) =&gt; theme.colors.main.text};
  `
  </code></pre>
  
  <p>My test is:</p>
  
  <pre><code>it('should render a &lt;header&gt; tag', () =&gt; {
    const renderedComponent = shallow(&lt;Wrapper /&gt;)
    expect(renderedComponent.type()).toEqual('header')
  })
  </code></pre>
  
  <p>Jest gives me this error:</p>
  
  <pre><code>&lt;Wrapper /&gt; › should render a &lt;header&gt; tag
  
      TypeError: Cannot read property 'main' of undefined
  
        at Object.&lt;anonymous&gt;._styledComponents2.default.header.theme (app/containers/AppBar/Wrapper.js:13:182)
  </code></pre>
  
  <p>Basically, it throws an error because <code>theme</code>is undefined so it cannot read the <code>colors</code> property in it. How can I pass the theme to my component ?</p>