'Test fails with "TypeError: theme.spacing is not a function" after migration from MUI v4 to v5

Have design system created/customized with MUI v4. Decided to update to V5 using this manual. All steps are done (with codemods and manual fixes), except moving from JSS, to Emotion - decided to keep JSS and (with @mui/styles lib). Fixed all TS compiler errors, but after running tests getting theres errors:

TypeError: theme.spacing is not a function

  18 |           : theme.palette.grey[100],
  19 |       border: 'none',
> 20 |       padding: `${theme.spacing(1)} ${theme.spacing(4)}`,
     |                         ^
  21 |       borderRadius: (props: StylesProps) => (props.round ? '2rem' : 8),
  22 |       transition: '0.2s',
  23 |       '&:hover': {

console.error MUI: 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.

 23 |     forwardedRef,
 24 |   ) => {
>25 |     const classes = useStyles({
     |                     ^
 26 |       round: round,
 27 |       transparent: transparent,
 28 |       hasValue: props.value !== '',

Basicly, these two error appears in all components where uses JSS and makeStyles with @mui/styles

Project code example (not all code, one of the components which creashes): CodeSandbox <-- Inside src you see one component and global dir with theme customization.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source