Estoy trabajando en un proyecto en React usando módulos CSS para estilos.
Me gustaría probar un componente usando Jest y React Testing Library, pero cuando intento renderizarlo, aparece este error:
El conjunto de pruebas no se pudo ejecutar
cssModule has no keys 3 | export default (style: {[key: string]: string}):any => { 4 | block.setSettings({throwOnError: true, modifierDelimiter: '--'}); > 5 | return block(style); | ^ 6 | }; 7 |
block es una anulación de una función exportada por la biblioteca bem-css-modules que uso para mantener la nomenclatura BEM mientras implemento css-modules.
Logré registrar el estilo exacto (importado por el archivo .module.scss) que se pasa a esta función, y descubrí que en realidad está vacío al renderizar el componente con react-testing-library:
import React from 'react'; import MyIcon from 'shared/components/myIcon/myIcon.component'; import styles from './myButton.module.scss'; import block from 'utils/bemCssModulesConfig'; console.log('styles', styles) // this logs "styles, {}" so it's empty object const bem = block(styles);
Este es el moduleNameMapper que estoy usando actualmente:
"moduleNameMapper": { "^.+\\.(scss|sass|css|less)$": "identity-obj-proxy" }
Ya he intentado usar proxies personalizados copiados de Internet o usar bibliotecas externas como moduleNameMappers.