Consider the following, simplified example:
class NotGonnaRead extends Component {
render() {
return (
<p>My favorite color is {this.context.favoriteColor}</p>
);
}
}
class WillRead extends Component {
render() {
return (
<p>My favorite color is {this.context.favoriteColor}</p>
);
}
}
WillRead.contextTypes = {
favoriteColor: PropTypes.string,
}
class FavoriteColorProvider extends Component {
getChildContext() {
return {
favoriteColor: 'purple',
};
}
}If we render it like so:
<FavoriteColorProvider>
<NotGonnaRead />
</FavoriteColorProvider>then the output is going to be My favorite color is .
Rendering this, however:
If we render it like so:
<FavoriteColorProvider>
<WillRead />
</FavoriteColorProvider>will correctly output My favorite color is purple.
Current behavior
If we would like to test if NotGonnaRead component is behaving properly (which it isn't), we would need to do something along the lines:
shallow(
<NotGonnaRead />,
{ context: { favoriteColor: 'purple' } }
);This will render <p>My favorite color is purple</p>.
Expected behavior
This example should render <p>My favorite color is </p> as contextTypes are not correctly defined.
Your environment
API
Version
| library |
version |
| Enzyme |
3.3.0 |
| React |
16.2.0 |
Adapter
Consider the following, simplified example:
If we render it like so:
then the output is going to be
My favorite color is.Rendering this, however:
If we render it like so:
will correctly output
My favorite color is purple.Current behavior
If we would like to test if NotGonnaRead component is behaving properly (which it isn't), we would need to do something along the lines:
This will render
<p>My favorite color is purple</p>.Expected behavior
This example should render
<p>My favorite color is </p>as contextTypes are not correctly defined.Your environment
API
Version
Adapter