web-dev-qa-db-fra.com

Erreur 'importation' du jeton inattendue lors de l'exécution des tests Jest?

Je me rends compte que cette question a été posée à plusieurs reprises, mais toutes les solutions que j'ai trouvées ne semblent pas fonctionner pour moi. Je rencontre l'erreur suivante lorsque j'essaie d'exécuter des tests Jest pour une application Vue. 

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

  You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html

Details:

/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

> 17 | import 'vue-awesome/icons/expand'

.babelrc:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}

jest config dans package.json:

"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
  ],
  "moduleDirectories": [
    "node_modules",
    "src"
  ]
}

Il semble que l'importation initiale dans le script du composant Vue en cours de montage pour le test fonctionne mais que l'importation dans le module lui-même (import Icon from '../components/Icon.vue) ne soit pas reconnue. 

Comment puis-je résoudre ça?

vue.jsjestjsbabel-jest
6
Don Peat

Vous devez juste vous assurer que vue-awesome sera transformé par jest, alors ajoutez Après votre configuration de jest: 

transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],

ce qui signifie: "Ignore tout dans node_modules à l'exception de vue-awesome. 

Voici également une liste exhaustive d’autres problèmes pouvant être à l’origine de cette erreur: https://github.com/facebook/jest/issues/2081

3
jb.

Si vous rencontrez ce problème après la mise à jour vers une version plus récente de Jest, essayez d'effacer le cache interne de Jest en exécutant:

jest --clearCache
0
sdgluck