Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JustinLex opened this issue Jul 8, 2019 · 4 comments

Comments

@JustinLex
Copy link

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:
enzymejs/enzyme#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}
    );
};
@githuboftigran
Copy link

@JustinLex , you just saved my day! It worked

@nmackey
Copy link

nmackey commented Jul 30, 2019

This is great! Thank you!

@brendanmoore
Copy link

This saved me today. Thank you!

@stefcameron
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants