I have a setup like the following:
// .jestrc.json
...
"moduleNameMapper": {
"style$": "<rootDir>/tests/mock.ts"
}
// mock.ts
export default {}
Which is how I usually exclude my assets from jest so that it doesn't break on trying to parse it.
However I had to use @mui/material (not my choice) and when using the same setup as I usually do running my tests now breaks on any @mui imports. Anywhere that I've imported a @mui component my test breaks with the error TypeError: (0 , _style.default) is not a function.
I've gone through every stackoverflow question I can find about this error and several other posts, but nothing I try fixes it.
The error is happening because the regular expression in the moduleNameMapper is also catching all the @mui styles, which makes @mui break because of not being able to access the theme provider and HOC styles that it internally uses. It results in @mui also now using the empty mocked object and breaks because of it.
I found and tried several solutions with jest.mock and mocking out the styles/theme, however most of them are utterly whacky solutions and none of them worked.
In the end the way I fixed it was to change:
"moduleNameMapper": {
"style$": "<rootDir>/tests/mock.ts"
}
to:
"moduleNameMapper": {
"style.(scss)$": "<rootDir>/tests/mock.ts"
}
So that it will only exclude my own styles and not @mui as well. @mui will deal with its own styles without issues when using jest, when using moduleNameMapper you have to be careful not to mock the modules that are required by your dependencies and to only exclude the modules you need to.
Using "style" in the regular expression accidentally also excluded all the @mui things without realizing, just fixing that and allowing @mui to handle itself made everything work perfect.