menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team

I can't mount with context after upgrading to react 16.6 and Styled Components…

November 23, 2018 at 10:07am

I can't mount with context after upgrading to react 16.6 and Styled Components v4

November 23, 2018 at 10:07am
I'm trying to run test with enzyme and I need to render some components which use properties from my global theme.
Before I had to do something like
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getChildContext()
But I noticed that getChildContext is not a function anymore so I thought about switching to this
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getContext()
But now I got an error
ThemeProvider: Please make your "theme" prop an object.
Even though my theme is just imported through the standard import from a file where it is defined as following
export default {
colors: {
primary: '#2e6da4'
}
}
Even when I log the theme it appears as an absolutely normal object. Is there anything wrong in that piece of code?
If more context/code is needed, I'm more than willing to provide it, I just wanted to keep the code as clean as possible

February 1, 2019 at 8:22am
Hi , have you resolved this issue? I am at the exact point right now.
  • reply
  • like
Hi , unfortunately I haven't, I had to either turn off some tests or downrgade to v16.3 of React. I think we'll have to wait for an update of Enzyme.
  • reply
  • like

February 13, 2019 at 6:16pm
Hi , I quickly copy & paste our workaround together here: https://gist.github.com/natterstefan/b9bedd92f89aa132dc8c113f4d6792a0. We ended up creating a small helper for mounting and shallowing components with themes. Maybe it helps you as well.
  • reply
  • like

February 18, 2019 at 11:06am
Hi thank you very much! That's very helpful!
like-fill
1
  • reply
  • like

February 19, 2019 at 6:58am
Hi , I have a problem with your solution, would you help me?
The problem:
ReferenceError: expect is not defined
12 | }
13 |
> 14 | export const mountWithTheme = (Component, customTheme) => {
| ^
15 | const theme = customTheme || defaulTheme
16 | return mount(<ThemeProvider theme={theme}>{Component}</ThemeProvider>)
17 | }
Example:
describe('Button', () => {
it('should mount button component', () => {
global.StyledComponents.mountWithTheme(
<Button>Hello</Button>
)
})
})
Sorry to bother you =/
Edited
  • reply
  • like
You're welcome ,
Hi , no worries! I am here to help. In the first code section it says: ReferenceError: expect is not defined but export is "highlighted" in line 14. Do you use jest or another tool?
Edited
  • reply
  • like
Thanks for helping me, I'm using jest
"jest": "^24.1.0",
"jest-styled-components": "^6.3.1",
  • reply
  • like
Have you installed and setup babel for jest as well? https://jestjs.io/docs/en/getting-started#using-babel.
  • reply
  • like
The real problem was that it was with the old configuration in the package, sorry for that, I adjusted it and it is now working, thank you for the help!
like-fill
1
  • reply
  • like
Sounds great, awesome. You're welcome .
like-fill
1
  • reply
  • like

June 25, 2020 at 10:28am
i'm getting this issue randomly. for context i'm using an old codebase with sass. Followed a guide so i can use sass variables as a theme. Now when i refresh my app i get ' ThemeProvider: Please make your "theme" prop an object."
  • reply
  • like
but this isn't all the time.
  • reply
  • like
im wondering if i its because i'm relying on the redux store to tell me which theme to use
Edited
  • reply
  • like
const armyTheme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../app/sass/army-variables.scss');
const navyTheme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../app/sass/navy-variables.scss');
const rafTheme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../app/sass/raf-variables.scss');
const marineTheme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../app/sass/marines-variables.scss');
let serviceTheme = {};
store.subscribe(() => {
const questionState = store.getState().toJS().questions;
// get service slug for theme
const serviceSlug = store.getState().toJS().app.activeServiceSlug;
if (serviceSlug !== null) {
serviceTheme = getTheme(serviceSlug);
}
onst render = messages => {
const theme = serviceTheme || navyTheme;
ReactDOM.render(
<Provider store={store}>
<LanguageProvider messages={messages}>
<ThemeProvider theme={theme}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</ThemeProvider>
</LanguageProvider>
</Provider>,
Edited
  • reply
  • like