title: How can I test styled components?
body: <p>What I need to test is <code>LoginWrapper</code> always renders inside <code>Login</code> component. I test it as follow but it does not pass since <code>LoginWrapper</code> cannot be found.</p>
  
  <pre><code>  import React from 'react';
    import Login from '../components/Login';
  
    import Wrapper from '../components/Wrapper';
    import styled from 'styled-components';
  
    describe('test login', () =&gt; {
  
      const shallowRender = (props) =&gt; shallow(&lt;Login {...props} /&gt;);
      let LoginWrapper;
  
      beforeEach(() =&gt; {
        LoginWrapper = styled(Wrapper)``;
      });
  
      afterEach(() =&gt; {
      });
  
      it('always render LoginWrapper', () =&gt; {
        const login = shallowRender({
          onSubmit: () =&gt; {}
        });
        const divs = login.find(LoginWrapper);
        expect(divs).toHaveLength(1);
      });
  
    });
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>  import React from 'react';
    import Wrapper from './Wrapper';
    import { H5, Text, ALink } from '@lendi/lendi-components';
    import styled from 'styled-components';
  
    const LoginWrapper = styled(Wrapper)`
      .mobile {
        margin-bottom: 2px;
      }
      .signup {
        padding-left: 5px;
      }
    `;
  
    function Login ({onSubmit}) {
        return (
          &lt;LoginWrapper&gt;
            &lt;H5 style={style.center}&gt;
              {txt.title}
            &lt;/H5&gt;
          &lt;/LoginWrapper&gt;
          );
      }
  
  export default Login;
  </code></pre>
  
  <p>It appears <code>LoginWrapper</code> will be rendered like <code>&lt;Styled(styled.div)&gt;</code> then what is the correct way to find it?</p>
  
  <p>Any advice will be appreciated.</p>