Jest: "Error de sintaxis: token no válido o inesperado" con .png

Consulte http://facebook.github.io/jest/docs/tutorial-webpack.html#content

EDITAR: el nuevo enlace es https://jestjs.io/docs/en/webpack

@matheusml ¿resolvió esto en absoluto? @cpojer Puedo confirmar que también tengo este problema. Tengo activos estáticos fuera de mi fuente. es decir, la estructura de mi directorio se parece a:

|-fonts
|-img
\_styles
src
|-components
|-pages
...

Mi configuración de broma se parece al ejemplo dado en el enlace:

"jest": {
    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
    }
  }

Mi prueba falla cuando intenta importar la imagen:

import thumbnail from 'img/thumbnail.png'

Supongo que es importante tener en cuenta que si no incluyo el directorio public en moduleDirectories , aparece el error: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

¿Es esto esperado? ¿Debería realmente validar la existencia de un evento de importación aunque la asignación del módulo ya esté configurada? De lo contrario, obtengo el mismo error que el anterior. No he probado ningún otro tipo de importación en el mapeador de nombres.

Estoy enfrentando el mismo problema, estoy tratando de implementar la representación del servidor reactjs. Cualquier solución para esto.

He puesto esto en mi babelrc y las cosas parecen estar funcionando:

{
"preajustes": ["es2015", "reaccionar"]
}

error del mismo tipo

SyntaxError: Unexpected token <
      /media/sibin/F_WORK/<path>/<icon-name>.svg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                               ^
      SyntaxError: Unexpected token <

También parece que tengo este problema. Solo sucede cuando requiero el png.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

Mismo error también. ¿Alguien lo arregla?

Tiene el mismo error con .mp3, Nada ayuda

Errores como este también pueden ser el resultado del uso de un ajuste preestablecido con rutas absolutas establecidas en el mapeador de nombres de módulos, por ejemplo. Sin embargo, este caso se solucionará en la próxima versión.

Tuve el mismo error y lo resolví creando un assetsTransformer.js :

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

Luego agregue esto a su configuración de broma en package.json:
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js", "\\.(css|less)$": "<rootDir>/assetsTransformer.js" } },

Fuente: https://facebook.github.io/jest/docs/webpack.html#content

En mi caso, no me di cuenta de que <rootDir> es un token proporcionado por Jest y asumí que era algo que necesitaba reemplazar. Agregarlo a las entradas moduleNameMapper resolvió el problema.

Agregué el assetTransformer.js mencionado por @bombellos. También siguió las instrucciones sobre Uso con paquete web . Pero sigo teniendo los mismos errores.

PNG:

 FAIL  components/__tests__/List.js
  ● Test suite failed to run

    /assets/images/logo-header.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (components/PageHeader.js:15:19)
      at Object.<anonymous> (components/Main.js:10:436)

SVG:

 FAIL  ui/Button/__tests__/snapshot.test.js
  ● fixture 'TextAndIcon' snapshots are rendered correctly

    /assets/icons/fontawesome/regular.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Icon (ui/Icon.js:31:17)
      at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2599:14)
      at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
      at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
      at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)

Mi estructura de carpetas es básicamente:

<rootDir>
  assets
    *.png, *.svg, ...
  components
    *.js
  ui
    *.js

Aparentemente, los archivos aún se cargan en lugar de simularse, pero no tengo idea de cómo depurar esto.

.babelrc:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1",
    ["env", {
      "targets": {
        "browsers": [
          "last 3 versions",
          "> 1%",
          "Firefox ESR",
          "iOS 9"
        ]
      }
    }]

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

paquete.json:

  "jest": {
    "snapshotSerializers": [
      "jest-glamor-react",
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": ["js"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/assetsTransformer.js"
    }
  },

Soy tonto, tenía otro jest.config.js en mi carpeta raíz que sobrescribió la configuración en package.json . Aunque todavía no se está ejecutando, ya no recibo este error en particular.

Lo tengo funcionando. Aquí están los bits importantes (tenga en cuenta que tengo una configuración adicional debido a la enzima 3 con react 16):

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "env"

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
  }
}

jest.config.js

// this helps: https://github.com/facebook/jest/issues/2081#issuecomment-332406033
module.exports = {
  verbose: true,
  setupFiles: ['./jest.setup.js'],
  snapshotSerializers: ['jest-glamor-react', 'enzyme-to-json/serializer'],
  moduleFileExtensions: ['js', 'jsx'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/config/jest/assetsTransformer.js',
  },
};

jest.setup.js

import 'raf/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Espero que eso ayude a alguien.

Estaba teniendo problemas con un archivo svg . Me di cuenta de que podía burlarme de él con identity-obj-proxy :

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },

Para cualquiera que esté investigando este problema, @timgivois funciona maravillosamente para mí. Tienes que instalar 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"
    }
  }

Si bien la solución de @mbaranovski funciona, no sé si su intención era usarla como transformador. Produce el siguiente resultado (preste atención al atributo src):

<img alt="ImgName" height="28" src={ Object { "process": [Function], } } width="112" />

Esencialmente, está mapeando todo, desde ese módulo hasta el lugar donde necesité un SVG. Por lo tanto, podría salirse con la suya con ese módulo simplemente siendo:

module.exports = {}

La otra solución, como se indicó anteriormente, es usar la identidad-obj-proxy.

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

me salva el día. ¡¡Gracias!!.

@mbaranovski Funcionó bien cuando ejecuté solo una broma para la prueba. Lamentablemente, cuando trato de ejecutar los scripts de reacción de create-react-app, obtengo

Out of the box, Create React App only supports overriding these Jest options

Hay una solución para esto ? ¿O la única solución es expulsar create-react-app?

No creo que la CRA apoye esa opción. No estoy seguro de por qué quiere cerrar las opciones, probablemente sea una buena razón 🙂

/cc @gaearon

Otra solución:

npm i --save-dev jest-transform-stub

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

Tengo un módulo nativo de reacción que tiene imágenes. He probado assetsTransformer , identity-obj-proxy y jest-transform-stub . Solo funciona assetsTransformer.

Hola , @sibinx7 . Solucioné ese problema: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

Resolví esto usando el paquete jest-react-native , ya que todas las soluciones aquí no funcionaron para mí. Tal vez mi problema sea diferente, porque tengo problemas con los archivos PNG que se encuentran dentro del paquete react-native-router-flux .

Aquí un fragmento de mi archivo package.json :

{
  // ... 
  "devDependencies": {
    // ...
    "jest": "^23.4.1",
    "jest-react-native": "^18.0.0",
  },
  "jest": {
    "preset": "jest-react-native",
    "verbose": true,
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/react-native/Libraries/react-native/",
      "<rootDir>/node_modules/react-native/packager/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|react-navigation|react-native-router-flux))"
    ]
  },
  // ...
}

Ligera modificación para manejar archivos xml, en este caso usando la opción de transformación :

jest.config.js

module.exports = {
    transform: {
        ".+.(xml|bpmn)": "<rootDir>/src/__tests__/transformers/xmlTransformer.ts"
    },
}

/src/__tests__/transformers/xmlTransformer.ts (es posible que deba modificar su ruta,es un ayudante que representa el directorio raíz del proyecto).

module.exports = {
    process() {
        return 'module.exports = {};';
    },
    getCacheKey() {
        // The output is always the same.
        return 'xmlTransform';
    },
};

Vea aquí para más detalles.

Consulte http://facebook.github.io/jest/docs/tutorial-webpack.html#content

El enlace dado está roto

https://jestjs.io/docs/en/webpack

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

me salva el día. ¡¡Gracias!!.

Seguí el ejemplo de esto e instalé babel-jest y luego reemplacé identity-obj-proxy con babel-jest

o use este https://github.com/eddyerburgh/jest-transform-stub

solo la solución de @eddyerburgh funcionó para mí.

@magnusart
me salvas el día, funciona bien

Tuve este problema de png después de agregar ./node_modules/react-native-gesture-handler/jestSetup.js a setupFiles (ese fue mi intento de resolver el problema de la broma con react-native-gesture-handler ).

Probé https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart usando identity-obj-proxy ), pero rompió enzyme por cualquier motivo (ganó enzyme 's mock en un símbolo en lugar de una función). Luego probé https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
usando jest-transform-stub ), pero no hizo nada.

Eventualmente, probé https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer la solución webpack al principio), y esa fue la única que funcionó para mí.

Si alguien recibe este error con SVG, probablemente pueda usar esta biblioteca, funcionó muy bien para mí https://www.npmjs.com/package/jest-svg-transformer

Solo agregué en mi archivo jest.config.ts este código

transform: { '^.+\\.tsx?$': 'babel-jest', '^.+\\.svg$': 'jest-svg-transformer', },

Y el código en este archivo es este

ustedes pueden ignorar moduleNameMapper, es solo porque estoy usando la importación personalizada con babel