title: How to verify React props in Jest and Enzyme?
body: <p>So I was trying to learn about testing in React and I have this: <code>Button.js</code> and <code>Button.test.js</code></p>
  
  <p>The question is commented along with the code below: </p>
  
  <pre class="lang-js prettyprint-override"><code>// Button.js
  import React from 'react';
  import { string, bool, func } from 'prop-types';
  import { StyledButton } from './styled'
  
  const Button = ({
    size,
    text,
  }) =&gt; (
    &lt;StyledButton
      size={size}
      // the test will alway fail with result:
      // Expected value to be: "Join us"
      // Received: undefined
      // Unless I add add this line below
      text={text}
    &gt;
      {text} // but the text props is here. That is my current practice of passing the props to the children, am I missing anything?
    &lt;/StyledButton&gt;
  );
  
  Button.propTypes = {
    size: string,
    text: string,
  };
  
  Button.defaultProps = {
    size: '',
    text: '',
  };
  
  export default Button;
  
  // Button.test.js
  import React from 'react';
  import { shallow } from 'enzyme';
  
  import Button from '../../components/Button/Button';
  
  describe('Component: Button', () =&gt; {
    const minProps = {
      text: '',
      size: '',
    };  
  
    it('renders a button in size of "small" with text in it', () =&gt; {
      const wrapper = shallow(
        &lt;Button {...minProps} size="small" text="Join us" /&gt;
      );
  
      expect(wrapper.prop('size')).toBe('small');
      expect(wrapper.prop('text')).toBe('Join us');
    });
  });
  
  
  // StyledButton
  import Button from 'antd/lib/button';
  
  const StyledButton = styled(Button)`
    &amp;.ant-btn {
      padding: 0 24px;
  
      ${({ size }) =&gt; {
        if (size === 'small') {
          return css`
            font-size: 14px;
            line-height: 32px;
          `;
        }
        return null;
      }};
  `;
  
  export { StyledButton };
  </code></pre>
  
  <p>Does anyone know why the test will not pass unless I pass the props to the <code>StyledButton</code>? </p>