I can't mount with context after upgrading to react 16.6 and Styled Components…
November 23, 2018 at 10:07amI can't mount with context after upgrading to react 16.6 and Styled Components v4
November 23, 2018 at 10:07amI'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 thisconst 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.
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.
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.
February 18, 2019 at 11:06am
February 19, 2019 at 6:58am
Hi , I have a problem with your solution, would you help me?
The problem:
ReferenceError: expect is not defined12 | }13 |> 14 | export const mountWithTheme = (Component, customTheme) => {| ^15 | const theme = customTheme || defaulTheme16 | 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 =/
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?Have you installed and setup babel for jest as well? https://jestjs.io/docs/en/getting-started#using-babel.
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."
but this isn't all the time.
im wondering if i its because i'm relying on the redux store to tell me which theme to use
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 themeconst 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>,