Tengo una configuración como la siguiente:
// .jestrc.json ... "moduleNameMapper": { "style$": "<rootDir>/tests/mock.ts" } // mock.ts export default {}Así es como suelo excluir mis activos de la broma para que no se rompa al intentar analizarlos.
Sin embargo, tuve que usar @mui/material (no es mi elección) y cuando uso la misma configuración que suelo hacer, ejecutar mis pruebas ahora se interrumpe en cualquier importación de @mui . En cualquier lugar donde haya importado un componente @mui , mi prueba se rompe con el error TypeError: (0 , _style.default) is not a function .
Revisé todas las preguntas de stackoverflow que pude encontrar sobre este error y varias otras publicaciones, pero nada de lo que intenté lo solucionó.
El error ocurre porque la expresión regular en moduleNameMapper también captura todos los estilos @mui , lo que hace que @mui se rompa debido a que no puede acceder al proveedor de temas y estilos HOC que usa internamente. El resultado es que @mui ahora también usa el objeto simulado vacío y se rompe debido a eso.
Encontré y probé varias soluciones con jest.mock y burlándome de los estilos/temas, sin embargo, la mayoría de ellas son soluciones completamente extravagantes y ninguna funcionó.
Al final la forma en que lo arreglé fue cambiar:
"moduleNameMapper": { "style$": "<rootDir>/tests/mock.ts" }a:
"moduleNameMapper": { "style.(scss)$": "<rootDir>/tests/mock.ts" } De modo que solo excluirá mis propios estilos y no @mui también. @mui se ocupará de sus propios estilos sin problemas cuando use jest, cuando use moduleNameMapper debe tener cuidado de no burlarse de los módulos que requieren sus dependencias y solo excluir los módulos que necesita.
El uso de "estilo" en la expresión regular accidentalmente también excluyó todas las cosas de @mui sin darse cuenta, solo arreglando eso y permitiendo que @mui se manejara solo hizo que todo funcionara perfecto.