Component inside of <option> is not handled as STRING

[michalica]

What is the current behavior?
We use react-intl to do translations in our project. Since 16.5.0 release of react-dom we cannot use this anymore. <option><FormattedMessage id="something"></option>.

If we use that snapshot tests don't fail(we use react-test-renderer). When u look on rendered html there is a string rendered in option tag.

What is the expected behavior?
Tests failing. If we have any react component in option tag we expected to [Object Object] to be rendered inside of option.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

we use create-react-app. it only occurs is test env.
react, react-dom, react-test-renderer 16.5.1
react-int 2.6.0

[gaearon]

Please see #13586.

The React DOM behavior is intentional. It’s not supported to put custom components inside <option> and it worked in some cases by accident but crashed in others. So we changed it to not work consistently. With FormattedMessage, you can either use tagName (https://codesandbox.io/s/6yr4xy5ll3) or a render prop (#13586 (comment)).

You’re right this unfortunately wouldn’t reflect in the test renderer. This is because it intentionally doesn’t have DOM specific behavior. So it wouldn’t catch this problem. This is not something we plan to change because it needs to remain agnostic for other use cases.

[gaearon]

This is fixed in 18 Alpha.
https://codesandbox.io/s/thirsty-austin-yzgyg?file=/src/index.js