jest-styled-components icon indicating copy to clipboard operation
jest-styled-components copied to clipboard

Theming section in README.md should mention the new wrappingComponent API in Enzyme

Open JustinLex opened this issue 6 years ago • 4 comments

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 avatar Jul 08 '19 13:07 JustinLex

@JustinLex , you just saved my day! It worked

githuboftigran avatar Jul 11 '19 16:07 githuboftigran

This is great! Thank you!

nmackey avatar Jul 30 '19 14:07 nmackey

This saved me today. Thank you!

brendanmoore avatar May 15 '20 10:05 brendanmoore

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 😏 ).

stefcameron avatar Jan 14 '21 17:01 stefcameron