-
-
Notifications
You must be signed in to change notification settings - Fork 145
-
-
Notifications
You must be signed in to change notification settings - Fork 145
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
Having trouble with enzyme mount of tree that depends on theme #106
Comments
Hello @duro, thanks for opening this issue. |
I'm having an issue with this as well.
This is what my test looks like: const context = shallow(<ThemeProvider theme={theme} />).instance().getChildContext();
const element = mount(<MyComponent />, {context}); MyComponent is a form component that contains, among other things, several input components that are styled-components. The error I get back is A console.log inside the nested styled-component shows that the theme prop isn't defined. Any help would be greatly appreciated! |
Hello @alexpate, I'll be more than happy to help. test('theming', () => {
const Button = styled.button`
color: ${props => props.theme.main};
`
const theme = {
main: 'mediumseagreen',
}
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getChildContext()
const element = mount(<Button />, { context })
expect(element).toMatchSnapshot()
}) exports[`theming 1`] = `
.c0 {
color: mediumseagreen;
}
<styled.button>
<button
className="c0"
/>
</styled.button>
`; Would you mind providing a non-working example? |
@MicheleBertoli <MyComponent>
<AnotherComponent>something important</AnotherComponent>
</MyComponent> import MyComponent from './MyComponent';
test('themeing', () => {
const theme = {
main: 'mediumseagreen',
}
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getChildContext()
const wrapper = mount(<MyComponent />, { context })
// expect ...
}) In the snippet above |
Oh, I see - it seems Enzyme injects the context only in the root component. |
@MicheleBertoli I'd like to use setState() or setProps() whick can only be called on the root element. |
Apologies for the slow reply, have been away for the past week or so. We are running in to the same problem that @froyog has outlined. We can use the |
We're having the same issue as well. Reading through other similar issue in this repo and styled-components repo it seems that so far the solutions only apply to using |
Has anyone found any good solutions to this issue? I'm also currently running into this problem |
@poffdeluxe At the moment, there doesn't seem to be a full solution. You can access some of the root methods, by calling To access state for example: const wrapper = mount(
<ThemeProvider theme={theme}>
<Button />
</ThemeProvider>
);
wrapper.find('Button').instance().state; http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html But methods such as |
Gotcha. I think I might have figured out the workaround: const mountWithTheme = (tree, theme) => {
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getChildContext();
return mount(tree, {
context,
childContextTypes: ThemeProvider.childContextTypes
});
}; From what I understand following the discussion on enzymejs/enzyme#144 it looks like the My child components are now receiving theme data on full mounts |
This is awesome, thank you very much @poffdeluxe. |
Any chance you could add this to the test utilities documentation on the official website as well? This entirely solved my problem, but I didn't think to check the README in addition to the docs on the website until I found this issue. |
That's a very good point, @jakelazaroff. |
Sorry for the delay, I've been super busy last few weeks. I'll put up a PR for the styled-components website when I can |
Thank you very much, @poffdeluxe. |
This solution is not working for me because of the
Produces the following error:
|
The |
|
For lost googlers, if you have a Instead use simpler version:
See this issue as well: #217
|
I know this is a topic that has been marked as "tricky" but I could really use some help to understand how to best go about testing a tree that has components that depend on theme using enzyme's mount rendering.
I have tried the following solutions to no avail:
AND:
Any direction you could provide?
The text was updated successfully, but these errors were encountered: