Theming section in README.md should mention the new wrappingComponent API in Enzyme
Getting themed styled-components to render in Enzyme is a real pain, especially for people new to Enzyme. Jest-styled-components shows up in google searches for this problem, and the solution given in README doesn't work with the latest Context API in React.
Enzyme added a new renderer prop in last month's 3.10.0 release, which allows a shallow() or mount() to be wrapped by another component and seems to be how they plan to support the new Context API in React. PR for the added Enzyme feature: https://github.com/airbnb/enzyme/pull/1960
I think it would be good if the README shows users how to write a themeable render wrapper using this new API.
Here's a code example of a mount wrapper for enzyme using the new wrapping:
const mountWithTheme = (tree, theme) => {
const WrappingThemeProvider =
(props) => (
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
);
return mount(
tree,
{wrappingComponent: WrappingThemeProvider}
);
};
@JustinLex , you just saved my day! It worked
This is great! Thank you!
This saved me today. Thank you!
Thank you, @JustinLex, this was a huge help after spending hours getting no where with ~700 failing tests after an Emotion 9 -> 10 upgrade (of course, 11 is out now, but one thing at a time 😏 ).