Shallow testing (enzyme) component with custom theme and mui-styles' makeStyles hook

Can you add a way (or add documentation) to shallow test a component with a custom theme and using styling hooks? Using unwrap worked with withStyles to shallow mount a component, but now with hook styling there is no longer a HOC styling wrapper. Dive is also not working as expected.

ex.

const theme = createTheme(/*custom theme here */);

const useStyles = makeStyles(theme => ({
    customStyle: {
          color: /* custom theme value here */
}));

const MyComponent = () => {

    const classes = useStyles();

    return (
        <div className={classes.customStyle} />
    );
}

I’m use shallow rendering (enzyme), and I wrap this component in the themeprovider from mui-styles. Diving into the themeprovider I get an error. Can you either add documentation surrounding this or add a clear way to test styling hooks?

[mdvorscak]

@BenBrewerBowman I was running into the same issues and I’ve found a way around using jest mocks. Here are the steps for my workaround:

1. Create a manual mock at the root of your project (defined in jest.config). The path should look like <root>/__mocks__/@material-ui/styles.ts
2. Add the following code into the file:

// Grab the original exports
import * as Styles from "@material-ui/styles";

const makeStyles = () => {
    return () => {
        /**
         * Note: if you want to mock this return value to be
         * different within a test suite then use
         * the pattern defined here:
         * https://jestjs.io/docs/en/manual-mocks
         **/
        return {};
    };
};

module.exports = { ...Styles, makeStyles };

You should now be able to use shallow rendering on all your tests. Just a couple of notes:

1. I’m using typescript but you should be able to easily adapt this for JS
2. Be sure that your mock file path matches what you are importing. In my case our imports always look like this: import { makeStyles } from "@material-ui/styles";

edit: updated mock to be much simpler (inspired by: https://github.com/mui-org/material-ui/issues/14357#issuecomment-470324935)

[oliviertassinari]

@BenBrewerBowman I believe we already have a discussion for this problem: #11864.

I would encourage you to use the mount API and to forget about the existence of the shallow one, or even to consider using react-testing-library. I don’t think that enzyme shallow API support the context provider pattern yet, e.g. https://github.com/airbnb/enzyme/issues/2103. React shallow test utils might not support it either: https://github.com/facebook/react/pull/14329.

but mounting is really driving up our build times.

I understand the concern. Did you benchmark it? We are migration the whole Material-UI test suite away from the shallow API. I personally think that the code refactoring flexibility the mount API provides worth a slower test suite. We haven’t benchmarked any significant difference yet. The tests on the master branch take 32s, the tests on the next branch, where we started the mount migration take 42s (but we added many new tests).