Fix PropType of Formatted{,HTML}Message to accept any component

src/components/html-message.js

@@ -23,7 +23,11 @@ export default class FormattedHTMLMessage extends Component {
   static propTypes = {
     ...messageDescriptorPropTypes,
     values: PropTypes.object,
-    tagName: PropTypes.string,
+    tagName: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+      PropTypes.shape({render: PropTypes.func.isRequired}),
+    ]),
     children: PropTypes.func,
   };
 

src/components/message.js

@@ -40,7 +40,11 @@ export default class FormattedMessage extends Component {
   static propTypes = {
     ...messageDescriptorPropTypes,
     values: PropTypes.object,
-    tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    tagName: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+      PropTypes.shape({render: PropTypes.func.isRequired}),
+    ]),
     children: PropTypes.func,
   };
 

test/unit/components/html-message.js

@@ -190,6 +190,26 @@ describe('<FormattedHTMLMessage>', () => {
         );
     });
 
+    it('accepts a react component as `tagName` prop', () => {
+        const {intl} = intlProvider.getChildContext();
+        const descriptor = {
+            id: 'hello',
+            defaultMessage: 'Hello, World!',
+        };
+
+        const H1 = (children) => <h1>{children}</h1>
+        const el = <FormattedHTMLMessage {...descriptor} tagName={H1} />;
+
+        renderer.render(el, {intl});
+        expect(renderer.getRenderOutput()).toEqualJSX(
+            <H1
+                dangerouslySetInnerHTML={{
+                    __html: intl.formatHTMLMessage(descriptor),
+                }}
+            />
+        );
+    });
+
     it('supports function-as-child pattern', () => {
         const {intl} = intlProvider.getChildContext();
         const descriptor = {

test/unit/components/message.js

@@ -205,7 +205,7 @@ describe('<FormattedMessage>', () => {
         );
     });
 
-    it('accepts an react element as `tagName` prop', () => {
+    it('accepts a react component as `tagName` prop', () => {
         const {intl} = intlProvider.getChildContext();
         const descriptor = {
             id: 'hello',