Testing with custom theme palette

Problem description

If I create a custom theme and test a component that is leveraging a custom object from that theme, tests fail because that custom field is undefined, is there a documented way to test components with custom themes?

Steps to reproduce

Create a custom theme:

customTheme = {
  "direction": "ltr",
  "palette": {
     "customObject": {
         "customField1": "#FF0000"
     },
......
}

Shallow render custom component with a custom theme.

shallow(
<MuiThemeProvider theme={customTheme} >
<ComponentThatUsesCustomField1 />
</MuiThemeProvider
).dive()

Will throw an undefined error at customObject.

Versions

• Material-UI: alpha v7
• React: 15.6.1
• Browser: latest

[JavierLight]

Hello,

I’m experiencing a similar issue. I’ve wrapped a TextField in a MuiThemeProvider, so when using jest tests fail:

createMuiTheme -> createPalette -> augmentColor ()

It seems that it’s unable to get the palette in the tests, even though it’s working perfectly in the rest of scenarios (no browser console logs complaining when NODE_ENV='development', so our palette is well defined).

Is there any workaround to include this context for our tests (with shallow)? Maybe the augmentColor should not be raising an error if NODE_ENV='test' ?

Thank you very much for your help.

[stocky37]

I worked around this by manually adding the custom theme in to the context like so:

import {CHANNEL} from '@material-ui/core/styles/themeListener';
import createBroadcast from 'brcast';

const broadcast = createBroadcast();
broadcast.setState(customTheme);
const wrapper = shallow(<ComponentThatUsesCustomField1 />, {
  context: {
    [CHANNEL]: broadcast,
  },
});

You can use the above logic to wrap createShallow or make it cleaner in any number of ways.