Theme.spacing is not a function

Question

I have recently migrated my react app from material-ui v3 to v4 and replaced '@material-ui/core/styles' with '@material-ui/styles',for testing we have used jest and enzyme.Tests failed after migration.How can I resolve this issue? Errors are as follows:

Warning: Material-UI: the styles argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider. Error: Uncaught [TypeError: theme.spacing is not a function] Full DOM rendering › encountered a declaration exception TypeError: theme.spacing is not a function

  17 |   },
  18 |   selectEmpty: {
> 19 |     marginTop: theme.spacing(2),
     |                      ^
  20 |   },

Answer 1

Material UI old version is like import { makeStyles } from '@material-ui/styles';

but they have updated new version like that import { makeStyles } from '@material-ui/core/styles'

Answer 2

You have to wrap every test with ThemeProvider. This resolves the issue. Example:

    wrapper = mount(
      <ThemeProvider>
        <Dropdown handleSelect={handleSelectSpy} options={options} />
      </ThemeProvider>,
    );