En los componentes de React, la importación de activos (por ejemplo, importar el logotipo de "../../../assets/img/logo.png) da ese error
({"Objeto.":función(módulo,exportaciones,requerir,__dirname,__filename,global,broma){�PNG
SyntaxError: Token no válido o inesperado en ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
mi configuración de broma es
"jest": { "testRegex": ".*\\.spec\\.js$", "moduleFileExtensions": [ "js", "jsx", "json" ], "moduleDirectories": [ "node_modules", "src", "assets" ], "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js" }, "verbose": true, "bail": true }¿Qué me estoy perdiendo?
Cuando importa archivos de imagen, Jest intenta interpretar los códigos binarios de las imágenes como .js, por lo que se encuentra con errores.
¡La única salida es simular una respuesta predeterminada cada vez que Jest vea una imagen importada!
"jest": { "moduleNameMapper": { "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less)$": "<rootDir>/__mocks__/fileMock.js" } } Nota : si ya tiene la clave "Jest" , simplemente agregue el "moduleNameMapper" en ella
fileMock.js mocks de ella. complete el archivo con el fragmento a continuación module.exports = ''; Nota : si está utilizando es6, puede usar export default ''; para evitar una bandera de Eslint
cuando haya terminado con los pasos anteriores, puede reiniciar la prueba y listo.
nota recuerde agregar las diferentes extensiones de sus archivos de imagen en moduleNameMapper para que puedan burlarse.
Espero haber podido ayudar. #¡salud!
Para cualquiera que esté investigando este problema. npm install --save-dev identity-obj-proxy para obtener las dependencias necesarias.
"jest": { "moduleNameMapper": { ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" } }Tuve el mismo problema y lo resolví de la siguiente manera:
npm install -D jest-transform-stub "jest": { ... "transform": { ... ".+\\.(css|scss|png|jpg|svg)$": "jest-transform-stub"