Jest: "Erreur de syntaxe : jeton non valide ou inattendu" avec .png

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

EDIT : le nouveau lien est https://jestjs.io/docs/en/webpack

@matheusml avez-vous résolu ce problème ? @cpojer Je peux confirmer que j'ai aussi ce problème. J'ai des actifs statiques en dehors de ma source. c'est-à-dire que ma structure de répertoires ressemble à :

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

Ma configuration de plaisanterie ressemble à l'exemple donné dans le lien :

"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"
    }
  }

Mon test échoue lorsqu'il tente d'importer l'image :

import thumbnail from 'img/thumbnail.png'

Je suppose qu'il est important de noter que si je n'inclus pas le répertoire public dans moduleDirectories , alors j'obtiens l'erreur : Cannot find module 'img/thumbnail.png' from 'MyModule.js'

Est-ce prévu ? Doit-il vraiment valider l'existence d'un événement d'importation alors que le mappage du module est déjà configuré ? Sinon, j'obtiens la même erreur que ci-dessus. Je n'ai essayé aucun autre type d'importation dans le mappeur de noms.

Je suis confronté au même problème, j'essaie d'implémenter le rendu du serveur reactjs. Toute solution pour cela.

J'ai mis ceci dans mon babelrc et les choses semblent fonctionner:

{
"presets": ["es2015", "réagir"]
}

Erreur du même type

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 <

J'ai aussi l'impression d'avoir ce problème. Cela ne se produit que lorsque j'ai besoin du png.

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

Même erreur également. Est-ce que quelqu'un le répare?

Avoir la même erreur avec .mp3, rien n'y fait

Des erreurs comme celle-ci peuvent également résulter de l'utilisation d'un préréglage avec des chemins absolus définis dans le mappeur de nom de module, par exemple. Ce cas sera cependant corrigé dans la prochaine version

J'ai eu la même erreur et je l'ai résolue en créant un assetsTransformer.js :

const path = require('path');

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

Ajoutez ensuite ceci à votre configuration jest dans 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" } },

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

Dans mon cas, je n'avais pas réalisé que <rootDir> était un jeton fourni par Jest, et j'ai supposé que c'était quelque chose que je devais remplacer. L'ajouter aux entrées moduleNameMapper a résolu le problème.

J'ai ajouté le assetTransformer.js mentionné par @bombellos. Suivez également les instructions sur l' utilisation avec webpack . Mais j'obtiens toujours les mêmes erreurs.

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)

Ma structure de dossier est essentiellement:

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

Apparemment, les fichiers sont toujours chargés au lieu d'être moqués, mais je n'ai aucune idée de comment déboguer cela.

.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"]
    }
  }
}

package.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"
    }
  },

Je suis stupide, j'avais un autre jest.config.js dans mon dossier racine qui a écrasé les paramètres dans package.json . Bien qu'il ne fonctionne pas encore, je n'obtiens plus cette erreur particulière.

Ça marche. Voici les éléments importants (veuillez noter que j'ai une configuration supplémentaire due à l'enzyme 3 avec la réaction 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() });

J'espère que cela aide quelqu'un.

J'avais des problèmes avec un fichier svg . J'ai réalisé que je pouvais m'en moquer avec identity-obj-proxy :

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

Pour tous ceux qui se penchent sur ce problème, la méthode @timgivois fonctionne à merveille pour moi. Vous devez installer npm install --save-dev identity-obj-proxy pour obtenir les dépendances nécessaires.

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

Bien que la solution de @mbaranovski fonctionne, je ne sais pas si son intention était de l'utiliser comme transformateur. Il produit la sortie suivante (faites attention à l'attribut src) :

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

Essentiellement, il mappe tout, de ce module à l'endroit où j'avais besoin d'un SVG. Ainsi, vous pourriez vous en sortir avec ce module étant simplement :

module.exports = {}

L'autre solution de contournement, comme indiqué ci-dessus, consiste à utiliser identity-obj-proxy.

@magnusart

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

ça me sauve la journée. Merci!!.

@mbaranovski Cela a très bien fonctionné quand je n'ai couru que des blagues pour le test. Malheureusement, lorsque j'essaie de parcourir les scripts de réaction de create-react-app, je reçois

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

Existe-t-il une solution de contournement pour cela? Ou la seule solution est d'éjecter create-react-app ?

Je ne pense pas que l'ARC appuie cette option. Je ne sais pas pourquoi il veut fermer les options, probablement une bonne raison 🙂

/cc @gaearon

Une autre solution de contournement :

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

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

J'ai un module natif de réaction a des images. J'ai essayé assetsTransformer , identity-obj-proxy et jest-transform-stub . Seuls assetsTransformer fonctionne.

Salut @ sibinx7 J'ai résolu ce problème par: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

J'ai résolu ce problème en utilisant le package jest-react-native , car toutes les solutions ici n'ont pas fonctionné pour moi. Peut-être que mon problème est différent, car j'ai des problèmes avec les fichiers PNG qui se trouvent dans le react-native-router-flux .

Voici un fragment de mon fichier 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))"
    ]
  },
  // ...
}

Légère modification pour la gestion des fichiers xml, en l'occurrence en utilisant l'option transform :

jest.config.js

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

/src/__tests__/transformers/xmlTransformer.ts ( peut avoir besoin de modifier votre chemin,est un helper qui représente le répertoire racine du projet).

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

Voir ici pour plus de détails.

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

Le lien donné est cassé

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

@magnusart

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

ça me sauve la journée. Merci!!.

Je m'en suis inspiré et j'ai installé babel-jest puis j'ai remplacé identity-obj-proxy par babel-jest

ou utilisez ceci https://github.com/eddyerburgh/jest-transform-stub

seule la solution de @eddyerburgh a fonctionné pour moi.

@magnusart
tu me sauves la journée, ça marche bien

J'ai eu ce problème png après avoir ajouté ./node_modules/react-native-gesture-handler/jestSetup.js à setupFiles (c'était ma tentative de résoudre le problème de plaisanterie avec react-native-gesture-handler ).

J'ai essayé https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart using identity-obj-proxy ), mais il a cassé enzyme pour une raison quelconque (il a fait enzyme 's mock dans un symbole plutôt qu'une fonction). Ensuite, j'ai essayé https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
en utilisant jest-transform-stub ), mais cela n'a rien fait.

Finalement, j'ai essayé https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer la solution webpack au début), et c'était la seule qui fonctionnait pour moi.

Si quelqu'un rencontre cette erreur avec SVG, il peut probablement utiliser cette bibliothèque, cela a très bien fonctionné pour moi https://www.npmjs.com/package/jest-svg-transformer

J'ai seulement ajouté sur mon fichier jest.config.ts ce code

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

Et le code sur ce fichier est celui-ci

vous pouvez ignorer moduleNameMapper, c'est simplement parce que j'utilise l'importation personnalisée avec babel