Jest-styled-components: Theming section in README.md should mention the new wrappingComponent API in Enzyme

Created on 8 Jul 2019  路  4Comments  路  Source: styled-components/jest-styled-components

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}
    );
};

All 4 comments

@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 馃槒 ).

Was this page helpful?
0 / 5 - 0 ratings