タイトルのままですが、jest実行時に、親のComponentからMuiThemeProvider
を設定しており、子のComponent内部でmaterial-uiのComponentを利用していると
some_parent_component.jsx
...
render(){
return(
<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
<Router>
<BaseRouter />
</Router>
</MuiThemeProvider>
)
}
● Console
console.error node_modules/fbjs/lib/warning.js:36
Warning: Failed context type: The context `muiTheme` is marked as required in `CircularProgress`, but its value is `undefined`.
in CircularProgress (created by Issue)
in div (created by Issue)
in withScriptjs(withGoogleMap(Component)) (created by Issue)
in div (created by Issue)
in Issue
● Issue component › renders component
TypeError: Cannot read property 'prepareStyles' of undefined
at CircularProgress.render (node_modules/material-ui/CircularProgress/CircularProgress.js:187:48)
at node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
こんな感じでThe context muiTheme is marked as required
とかCannot read property 'prepareStyles' of undefined
と怒られてしまいます。
ここは親のComponentから与えているので出来たらテストでは無視してもらいたい(でないと全てのComponentを<MuiThemeProvider>
でwrapするハメになるので)のですが、そうなってません。
回避する方法としては、テスト内で
some_component_test.js
const wrapper = render(
<SomeComponent />,
{
context: {
muiTheme: getMuiTheme(),
},
childContextTypes: {
muiTheme: PropTypes.object.isRequired,
}
}
)
として、render(とかmount)時の引数にcontext等を設定してやればOKです。
テスト内の記述が増えるのでちょっと微妙な感じではあるので、ベターな回避方法があれば知りたい所です。