title: enzyme unit test, how to test component without exporting sub-components?
body: <p><a href="https://enzymejs.github.io/enzyme/docs/api/mount.html" rel="nofollow noreferrer">https://enzymejs.github.io/enzyme/docs/api/mount.html</a>
  <a href="https://medium.com/@samuelhutama/unit-testing-react-component-with-jest-and-enzyme-without-snapshot-test-5b26b8146abf" rel="nofollow noreferrer">https://medium.com/@samuelhutama/unit-testing-react-component-with-jest-and-enzyme-without-snapshot-test-5b26b8146abf</a></p>
  
  <p>See my main code, i don't want to export sub-components.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  // eslint-disable-next-line react/prop-types
  const DemoMessageBody = ({ inner }) =&gt; (
    // eslint-disable-next-line react/no-danger
    &lt;div dangerouslySetInnerHTML={{ __html: inner }} /&gt;
  );
  
  const DemoMessage = ({
    // eslint-disable-next-line react/prop-types
    msgTitle, msgBody,
  }) =&gt; (
    &lt;div&gt;
      &lt;p&gt;
        &lt;strong&gt;{msgTitle}&lt;/strong&gt;
      &lt;/p&gt;
      &lt;DemoMessageBody inner={msgBody} /&gt;
    &lt;/div&gt;
  );
  
  /**
   * Dispatch to the corresponding alert message box based on message type
   * @param {Object} alert message details including title, type and message body
   */
  const Demo = ({ msgTitle, msgBody }) =&gt; {
    return DemoMessage({ msgTitle, msgBody });
  };
  
  Demo.propTypes = {
    /**
     * Message box title
     */
    msgTitle: PropTypes.string,
    /**
     * Message type, this can be a html element or plain string
     */
    msgBody: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.element,
    ]),
  };
  
  Demo.defaultProps = {
    msgTitle: 'Sth is wrong',
    msgBody: 'Please contact your admin',
  };
  
  export default Demo;
  </code></pre>
  
  <p>The test is like this</p>
  
  <pre><code>import React from 'react';
  import { shallow, mount, render } from 'enzyme';
  import Demo from '../Demo';
  
  describe('DisplayMessageFromHtmlElement', () =&gt; {
    let prefix;
    let postfix;
    let testTitle;
  
    beforeEach(() =&gt; {
      prefix = 'Your request cannot be processed';
      postfix = 'Contact the admin.';
      testTitle = 'Test Title';
    });
  
    test('should show info message', () =&gt; {
      const msg1 = 'Info msg 1';
      const msg2 = 'Info msg 2';
      const inputMsg = (
        &lt;div&gt;
          &lt;p&gt;{prefix}&lt;/p&gt;
          &lt;ol&gt;
            &lt;li&gt;{msg1}&lt;/li&gt;
            &lt;li&gt;{msg2}&lt;/li&gt;
          &lt;/ol&gt;
          &lt;p&gt;{postfix}&lt;/p&gt;
        &lt;/div&gt;
      );
  
      const wrapper = mount(&lt;Demo msgTitle={testTitle} msgBody={inputMsg} /&gt;);
      expect(wrapper).toMatchSnapshot();
    });
  });
  </code></pre>
  
  <p>Now when i run the test, the snapshot doesn't expend to resolve the final html (which works in manual test), it still displays "DemoMessageBody", "dangerouslySetInnerHTML".</p>
  
  <p>My guess is if i export the sub-components (to their own files), this can work. But i do not want to export them.</p>
  
  <p>Any suggestions ?</p>