Jest: Importation de jetons inattendue pour les modules ES6

J'ai le même problème avec React-Native et Jest,
Si vous démarrez un nouveau projet avec :
réagir-native init AwesomeProject
cd AwesomeProject

puis installez un module comme npm install native-base --save
importez n'importe quel composant de native-base dans votre fichier index.ios.js

npm test lancera cette erreur :
../test/node_modules/native-base/index.js:4
importer le tiroir de './Components/vendor/react-native-drawer' ;
^^^^^^
SyntaxError : importation de jetons inattendue

Voir http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -customization

J'ai le même problème, le lien @cpojer fourni ne semble pas aider

Salut! 'transformIgnorePatterns' fait....mmmm... ce qu'il doit faire - en ignorant)
Mais comment puis-je utiliser cette importation dans le package à partir de node_modules ?

Ces accessoires m'ont aidé :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
Actuellement, ma config Jest est :

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... et ça marche pour moi :)

Cordialement, Pavel Tretiakov

Salut les gars, j'ai toujours ce problème, mais je n'utilise pas React Native. Le problème est toujours résolu en utilisant jest --no-cache. Existe-t-il un moyen de faire fonctionner Jest en utilisant le cache, sans générer cette erreur ?

Je ne parviens pas à faire fonctionner cette transformation avec mon application create-react-app. Obtenez toujours « Importation de jetons inattendue » sur tous les fichiers de test contenant une importation ES6. J'ai essayé toutes les suggestions que j'ai pu trouver. no-cache n'a aucun impact. Je ne peux évidemment pas ignorer ces fichiers de la transformation (ils doivent être transformés !).

J'abandonne. Heureux de fournir toutes les informations requises.

Il me semble également rencontrer ce problème.

Pareil ici

Pareil ici

Vous rencontrez probablement tous ce problème car les modules ES ne sont pas pris en charge dans Node et vous avez délibérément cessé de les compiler avec votre pipeline de build (webpack, rollup) lorsque vous les envoyez au navigateur.

Vous devez activer la compilation des modules ES vers CommonJS pour l'environnement "test" dans votre babelrc, voir https://babeljs.io/docs/usage/babelrc/#env -option et https://babeljs.io/docs/ plugins/transform-es2015-modules-commonjs/

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Merci pour votre réponse, cpojer. Hier, j'ai supprimé mes paramètres d'env de nœud et l'ai laissé fonctionner avec l'env de nœud par défaut, car jest fonctionnait globalement, mais pas en utilisant des scripts de nœud. Cela semblait résoudre le problème, je pense donc que mon problème était lié aux paramètres node-env. Mais c'est quand même quelque chose à surveiller.

EDIT : cela n'a pas fonctionné du tout. Le correctif de

Le correctif de

Génial, a également fonctionné pour moi, merci!

J'ai un problème similaire dans mon application native de réaction assez simple.

Lors de l'exécution de npm test ou jest cela est renvoyé 'SyntaxError: Unexpected token import'

.babelrc

{
"presets": ["react-native"]
}

.package.json

{
  "name": "BeeAppy",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.8.2",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-test-renderer": "^16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

L'extrait d'env suggéré par @cpojer va-
Désolé si c'est vraiment évident !
Toute aide serait super, merci

@JessicaBarclay, cela devrait aller dans votre configuration .babelrc. Comme ça:

"env": {
          "development": {
                 "plugins": ["transform-es2015-modules-commonjs"]
          }
}

Ahh merci @rlage ! Trié :)

FWIW, j'avais en fait configuré mon .babelrc avec les bons presets et plugins sous un environnement de test comme NODE_ENV=test sur ma ligne de scripts dans package.json .

Avant, échec avec "Importation de jetons inattendue" :

"scripts": {
  ...
  "test": "jest",
}

Après avoir réussi à transformer les fichiers :

"scripts": {
  ...
  "test": "NODE_ENV=test jest",
}

@jlyman

Sur la base de la doc Jest, cela ne devrait pas être nécessaire, car Jest définit le NODE_ENV pour tester par defult.

Remarque : si vous utilisez une configuration Babel plus compliquée, en utilisant l'option env de Babel, gardez à l'esprit que Jest définira automatiquement NODE_ENV comme test. Il n'utilisera pas la section de développement comme Babel le fait par défaut lorsqu'aucun NODE_ENV n'est défini.

Ce .babelrc est ce qui a fonctionné pour moi :

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

REMARQUE : cela semble étrange, mais les clés de développement et de test doivent être présentes, sinon cela ne fonctionnera pas.

Ensuite, je viens d'appeler:

node_modules/.bin/jest

ou avec package.json :

{"scripts": {"test": "jest"}}

Pas besoin de définir NODE_ENV pour tester.

@laszbalo Intéressant, la présence de ce deuxième env semble faire l'affaire. Si j'ajoute un environnement de développement et supprime le préfixe explicite NODE_ENV sur mes scripts, cela fonctionne. J'avais également lu cette partie de la documentation, mais j'ai fini avec cette solution car elle fonctionnait.

@jlyman quelle solution dans la

@doudounannan Désolé si ce n'était pas clair. La solution avec laquelle j'ai finalement opté est celle que j'ai postée ici . Comme @laszbalo l'a dit, cela va à l'encontre de ce que disent les docs sous Using Babel , mais la solution de @laszbalo ou mon injection directe de NODE_ENV test semblent fonctionner.

Bizarrement quand j'utilise "transformIgnorePatterns": [ ] alors babel transforme mes fichiers testés, mais si j'exclus l'option transformIgnorePatterns alors babel ne fait rien... J'ai un simple .babelrc pour tester uniquement (je utiliser webpack pour la production, mais pas pour les tests de jest):

{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

J'ai eu l'idée de https://github.com/facebook/jest/issues/2550#issuecomment -290812720 puisque rien d'autre dans #770 ou ici ne semblait aider...

Peu importe ce que je fais, c'est toujours la même erreur :

    /.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)
      at Object.<anonymous> (node_modules/react-native-gifted-chat/src/GiftedChat.js:10:29)

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "development": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
            "cwd": "babelrc",
        }]
  ]
}

"jest": {
    "preset": "react-native",
    "setupFiles": [
        "./__tests__/setup.js"
    ],
    "testRegex": "/__tests__/.*\\.spec\\.js$"
}

J'ai le même problème. J'ai ajouté ce qui suit à ma blague

"jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
          "node_modules/(?!react-native|react-navigation)/"
      ]
  }

et maintenant j'obtiens l'erreur suivante lorsque je lance Jest :

ReferenceError : plugin inconnu "transform-replace-object-assign" spécifié dans "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" à 0, tentative de résolution relative à "/Users/caalcaz/ Documents/Projets/Enterprise-app/node_modules/enzyme"

@calcazar qu'y a-t-il dans votre node_modules/enzyme/.babelrc ?

Je l'ai résolu en utilisant babel-jest _and_ ts-jest. Dans package.json :

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "globals": {
        "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest
    "testRegex": "test/.*\\.spec\\.ts$",
    "setupFiles": [
        "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
        "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    // some coverage and results processing options
},

Puis en .babelrc (que je n'utilise que pour les tests)

{
    "env": {
        "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

j'espère que ça aide quelqu'un ! (C'est pour une application aurelia donc YMMV)

@penseOfaNumber

C'est ce que je vois. pour info, j'utilise Enzyme V3.0

{
  "presets": ["airbnb"],
  "plugins": [
    ["transform-replace-object-assign", "object.assign"],
  ],
}

@thinkOfaNumber merci d'avoir posté votre suggestion. Je l'ai utilisé pour comprendre comment obtenir des modules es6 à partir d'une bibliothèque externe pour les compiler en plaisantant. La clé est ici

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest

C'est la partie dont j'ai besoin. Merci beaucoup!

@rochapablo au même endroit. De la chance ?

Non, pour l'instant, j'ignore le test de fichier spécifique qui renvoie l'erreur

Suivant. J'ai le même problème et rien pour l'instant ne semble le résoudre.

A suivre aussi

@rochapablo Avez-vous réussi à résoudre ce problème ?
Je ne peux pas non plus tester le composant qui a GiftedChat tant qu'enfant à cause du problème que vous avez mentionné...

@todorone , essayez d'ajouter :

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Merci pour l'astuce, mais malheureusement, cela n'a pas aidé. J'ai même essayé de jouer plus avec les transformIgnorePatterns regex mais cela n'a pas aidé.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
ajouter ce qui précède pour plaisanter

@rochapablo Avez-vous essayé le préréglage jest-expo ? De la chance ? J'ai rencontré un autre problème de syntaxe avec & transformIgnorePatterns

Ne fonctionne toujours pas pour moi. Je reçois la putain d'erreur d'importation.

@testacode c'est un import dynamique, avez-vous ajouté le plugin babel nécessaire ? Voir en bas de https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB merci, c'est ce qui me manquait !

C'est intéressant. Certaines mises à jour récentes ont supprimé l'ajout automatique de babel-jest. Alors en marche :

npm install babel-jest --save-dev

et l'ajout de RIEN D'AUTRE dans la configuration a résolu le problème pour moi. Je pense qu'il devrait être plus clair dans un message d'erreur qu'il n'est plus inclus...

J'ai résolu juste en installant babel-jest:
npm i babel-jest

N'oubliez pas non plus de créer un fichier .babelrc avec le contenu suivant :

{
    "presets": ["env", "react"]
}

Cela fonctionne pour moi:

.babelrc :

{
    "presets": ["env", "stage-3"],
    "plugins": ["transform-class-properties"]
}

package.json :

"scripts": {
    "test": "jest --forceExit"
},
"devDependencies": {
    "babel-core": "^6.11.4",
    "babel-jest": "^21.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "^21.2.0"
}

@hqro ça a marché pour moi, merci

Pour moi, j'avais ceci dans mon fichier .babelrc :

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ]
}

Et j'avais seulement besoin de m'assurer que l'environnement "test" utilisait plutôt des modules :

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "presets": ["react", "env"],
    }
  }
}

@nemoDreamer Il vaut mieux ne pas répéter les plugins et les préréglages dans une seule configuration

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"],
    }
  }
}

Quoi que j'essaye, j'ai une erreur.

> cross-env NODE_ENV=test jest --no-cache

 FAIL  src\views\Pay\__tests__\Pay.test.js
  ● Test suite failed to run

    C:\Users\***\Documents\Project\***\node_modules\ne-rc\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Alert from './Alert';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      11 |  * <strong i="6">@param</strong> {Array<Object>} [data] 每一种分期的详细信息 data=[{},{}...]
      12 |  * <strong i="7">@param</strong> {Number} [defaultSelected] 默认选中的下标
    > 13 |  * <strong i="8">@param</strong> {Funtion} [onClick] 点击触发事件
      14 |  * <strong i="9">@param</strong> {Number} [columnNum] 一行有多少列
      15 |  *
      16 |  * <strong i="10">@example</strong>

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/Installment/Installment.jsx:13:13)
      at Object.<anonymous> (src/components/Installment/index.js:8:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.693s

Voici mes fichiers de configuration.

* .babelrc *

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    // webpack understands the native import syntax, and uses it for tree shaking

    "es2015",
    "stage-2",
    // Specifies what level of language features to doPay.

    // Stage 2 is "draft", 4 is finished, 0 is strawman.

    // See https://tc39.github.io/process-document/

    "react"
    // Transpile React components to JavaScript
  ],
  "env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./server/server.js",
    "api": "cross-env NODE_ENV=api node ./server/server.js",
    "clean": "rm -rf dist",
    "dist": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --progress --colors",
    "online": "cross-env NODE_ENV=development node ./server/online.js",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./src --fix",
    "test": "cross-env NODE_ENV=test jest --no-cache",
    "test:watch": "npm test --watch",
    "stats": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --profile --json > stats.json",
    "gatest": "node ./service/gatest.js"
  },
  "pre-commit": [
    "lint"
  ],
  "jest": {
    "verbose": true,
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "./test/setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "md"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "asset-inject-html-webpack-plugin": "^0.9.1",
    "autoprefixer": "^7.1.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "better-npm-run": "0.1.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.1.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "deepmerge": "^2.0.1",
    "enzyme": "^3.3.0",
    "eslint": "^4.5.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.6.4",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.6",
    "git-repo-info": "^1.4.1",
    "glob": "^7.1.2",
    "happypack": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "idb": "^2.0.4",
    "imports-loader": "^0.7.0",
    "jest": "^22.4.2",
    "lodash.range": "^3.2.0",
    "mocha": "^5.0.0",
    "node-sass": "^4.5.3",
    "node-xlsx": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "pre-commit": "^1.2.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "regenerator-runtime": "^0.11.1",
    "request": "^2.74.0",
    "require-reload": "^0.2.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "sinon": "^4.2.0",
    "style-loader": "^0.19.1",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "worker-loader": "^1.1.0"
  }
}

@kisnows https://stackoverflow.com/questions/46065371/reactjest-syntaxerror-unexpected-token-import
https://segmentfault.com/n/1330000012786721

Lorsque vous définissez le préréglage dans .babelrc , assurez-vous que "env" est entre parenthèses ["env"] , comme ceci :

  "env": {
    "test": {
      "presets": [["env"], "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

surtout si vous avez "modules: false" dans votre configuration.

De plus, par défaut, jest ne transforme PAS les fichiers en node_modules , cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

C'est pourquoi tout import ... ne fonctionnera pas dans les fichiers node_modules . Pour désactiver cela, vous pouvez ajouter :

transformIgnorePatterns: []

à votre configuration de plaisanterie.

J'espère que cela t'aides!

@florentchauveau Merci, ce travail pour moi.

@todorone @rochapablo Avez-vous trouvé une solution pour cela ? Même moi, je suis confronté au même problème-

    import * as React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)

Je reçois cette erreur uniquement sur les tests des composants utilisant
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
C'est peut-être parce que @expo/react-native-action-sheet est livré en tant que module ES6 et que GiftedChat l'utilise en interne ? Mais jest / ts-jest (je ne suis pas sûr) devrait gérer cela si les préréglages sont ajoutés. Voici ma config Jest -

    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
            "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!rn-placeholder|react-native|react-navigation|native-base|react-native-datepicker|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
        ],
        "setupTestFrameworkScriptFile": "<rootDir>/src/__mocks__/Adapter.js",
        "testRegex": "(\\.(test|spec))\\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\\.snap$",
            "<rootDir>/node_modules/",
            "<rootDir>/lib/"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
        },
        "cacheDirectory": ".jest/cache"
    },

et le .babelrc -

{
    "presets": ["react-native"]
}

J'ai essayé presque toutes les solutions mentionnées ci-dessus. Aucun d'entre eux n'a fonctionné dans mon scénario. Besoin d'aide.

@omkarjoshi-cc la seule chose qui a fonctionné pour moi à l'époque sur laquelle je travaillais était d'ajouter le package qui déclenchait l'erreur, qui dans mon cas était :

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Ouais. Je l'ai essayé. N'a pas fonctionné. Y a-t-il autre chose qui pourrait manquer? C'est vraiment frustrant

J'utilise babel 7 et moi aussi, je n'ai toujours pas eu de chance avec "transformIgnorePatterns" - j'ai essayé de nombreuses expressions régulières différentes :/

Le problème que j'ai est qu'une dépendance contient des classes es6 natives, et j'ai une classe dans ma source qui l'étend. Étant donné que les "classes es5" transpilées par Babel ne peuvent pas étendre une classe native, j'obtiens une erreur d'exécution en plaisantant.

J'ai commencé à penser que d'une manière ou d'une autre, "babel/preset-env" entrave la façon dont le code est transpilé en plaisanterie (nœud cible), qui pourrait ne pas suivre les cibles du navigateur, mais toujours pas sûr de cela.

Est-ce que quelqu'un sait comment tout forcer à es5 pour plaisanter lors de l'utilisation de 'present-env' dans .babelrc?

La seule solution de contournement que je puisse penser est de ne pas utiliser babel-jest, d'exécuter webpack (qui utilise babel-loader et les règles selon lesquelles les fichiers à transformer ont fonctionné pour moi), puis d'exécuter jest -> je pense à utiliser webpack -w et plaisante regarder le transpilé ..)

Ajouter

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat|@expo/react-native-action-sheet)"
]

travaillé pour moi. Merci à @rochapablo 🙌

Je suis aux prises avec ce problème. Mon dossier de sortie qui est testé devrait-il être la syntaxe ES6 avec import etc. Je ne vois aucun commonjs dans mon / mes fichiers de sortie (en l'utilisant avec react-native)

Je suis confronté au même problème et cette page résout le problème :
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

Pour une raison quelconque, au lieu de babel-jest , l'utilisation de ce qui suit l'a fait fonctionner pour moi (respectez le transformIgnorePatterns apparemment)

"transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest-babel-7"
    }

d'ailleurs, ce problème devrait être rouvert ici, n'est-ce pas ? de nombreuses personnes confrontées à des difficultés

Dans mon cas, il s'avère que ce problème a été causé par l'ignorance des fichiers de test dans ma configuration babel. Pour des raisons indépendantes, j'avais "ignore": ["**/*.test.js"] dans mon fichier .babelrc.

La solution consistait à définir uniquement l'option ignorer pour l'environnement de production, c'est-à-dire :

"env": {
    "production": {
      "ignore": [
        "**/*.test.js"
      ]
    }
  }

Alternativement, vous pouvez spécifier un modèle ignorer spécial pour le test env.

Après avoir beaucoup essayé, voici mon cas

1. Assurez-vous d'avoir les bonnes versions de babe-jest *
2. assurez-vous d'avoir une configuration .babelrc avec des préréglages (précédemment installés)
3. si son erreur de "jeton inattendu" persiste, peut-être que les fonctions fléchées ne sont pas reconnues, ce plugin babel vous aidera à "transform-class-properties" également à les inclure dans votre configuration babel.

voici mes config.

.babelrc

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]}

pour l'enzyme (setupTests.js)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-15";
configure({ adapter: new Adapter() });

package.json

 "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^4.19.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.6.2",
     "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "gh-pages": "^0.12.0",
    "jest": "^22.4.3",
    "react-addons-test-utils": "^15.4.2",
    "regenerator-runtime": "^0.11.1"
  },
"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

yarn add --dev babel-jest babel-core regenerator-runtime ajouter ceci a fonctionné pour moi

Dans mon cas, c'était un problème avec Windows et ses autorisations stupides, probablement en ne définissant pas correctement les variables env.
Passé de git bash à un cmd.exe et a recommencé à fonctionner.

J'ai jest défini comme script (renommé test:jest en test ), dans mon package.json . Cependant, lors de l'exécution de npm run test , j'obtiens SyntaxError: Unexpected token import :

root<strong i="14">@browserify</strong>:/var/machine-learning/src# npm run test

> [email protected] test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.782s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-08T01_50_42_754Z-debug.log

J'ai également défini un jest.config.js :

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': ['/var/machine-learning/src/node_modules'],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ]
}

Je vois beaucoup de choses sur react-native , et transformIgnorePatterns . Heureusement, et malheureusement, je ne l'utilise pas. Quel bug insaisissable c'est. Dois-je définir .babelrc , ou ajouter une directive jest dans mon package.json . Comment ma blague script connaît-elle babel, si c'est le cas ? J'ai essayé d'ajouter un .babelrc , dans le même répertoire contenant mon package.json , sans succès :

{
  "env": {
    "test": {
      "presets": ["env", "stage-2", "react"]
    }
  }
}

Remarque : si quelqu'un veut garder une trace de mon problème d' origine concernant le problème ci-dessus.

Après beaucoup de bêtises, j'ai trouvé les problèmes suivants:

• Jest exécute babel 6 par défaut. Babel 6 ne recherche pas un fichier .babelrc.js . Uniquement pour un fichier .babelrc . Si vous avez une configuration JS au lieu de JSON, il ne lira pas la configuration et n'utilisera donc aucun plugin. Cela a abouti au unexpected token: import pour moi.
• babel-7-jest s'exécute sur un ancien moteur de base Babel 7, interrompant ainsi la prise en charge des nouveaux plugins de proposition.
• Il semble que npm i -D [email protected] RÉSOLU COMPLÈTEMENT LE PROBLÈME . Je n'ai même pas env.test dans ma configuration babel, et je n'ai pas non plus de configuration jest.

Il semble que Jest recherche babel-core (et ignore donc @babel/core ), sinon il revient à Babel 6 et ignore votre configuration. Mais lorsque la dernière babel-core (version bridge) est installée, elle analyse les modules ES6 sans aucune configuration supplémentaire.

Merci kasvtv ! J'ai changé mon .babelrc.js en .babelrc et installé npm i -D [email protected] . Maintenant mes tests s'exécutent avec babel-jest

Vous pouvez utiliser en toute sécurité un fichier de configuration .js. C'est juste que Babel ne lit ce type de fichier qu'à partir de la version 7 et vous avez besoin de [email protected] pour que Jest utilise la version 7 de Babel.

Si quelqu'un est intéressé, j'ai fait fonctionner mes tests jest + enzymatique. N'hésitez pas à fouiller dans les fichiers de

J'ai eu un problème similaire en raison de l'échec des bibliothèques antd et rc-calendar etc. à importer des modules, la solution consistait à configurer transformIgnorePatterns

transformIgnorePatterns: [ 'node_modules/?!(antd|rc-.+)/' ],

Peut-être que moduleDirectories a aussi aidé :

moduleDirectories: ['node_modules'],

J'ai mis à jour vers la dernière version de react-native et j'ai dû mettre à jour vers babel 7 et j'obtiens maintenant la même erreur.

L'ajout de ces node_modules dans transformIgnorePatterns ne semble plus rien faire.

Dans mon cas, c'est parce que je ne transpile plus de modules avec Babel, et il y a une note sur le guide de démarrage sur l'ajout de cela à la partie test de votre babelrc.

@kasvtv @willb335 J'utilise une astuce pour que Babel 6 reconnaisse .babelrc.js :

package.json

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },

Je rencontre le même problème avec l'utilisation de la bibliothèque @material/base, quelqu'un pourrait-il fournir .babelrc fichier package.json & .babelrc à résoudre. J'ai essayé les retours ci-dessus, mais je me suis trompé...

la solution pour moi était d'ajouter un préréglage "env" sur le fichier .babelrc, donc cela s'est avéré comme ceci
{
"presets": ["env", "es2016", "stage-0", "react"]
}

L'utilisation de ces informations de lien a résolu mon problème
https://jestjs.io/docs/en/webpack.html

@negarineh ton lien ne marche pas

L'utilisation de la solution transformIgnorePatterns fournie par @haywirez transforme mon

SyntaxError: Unexpected token import

erreur dans un

TypeError: Cannot read property 'DocumentDir' of undefined

erreur. C'est-à-dire que le paquet (rn-fetch-blob) est maintenant indéfini.

Éditer:

en fait, le simple fait d'ajouter transformIgnorePatterns: [], à mon jest.config.js provoque le changement de SyntaxError en TypeError.

@schumannd Désolé d'avoir fait une erreur, le lien vous redirige maintenant vers la page. Si vous définissez votre "jest.config.js" avec la configuration fournie dans le lien, cela devrait fonctionner.
Si l'erreur concerne l'importation du fichier .css, l'ajout d'un fichier fictif comme l'exemple dans le lien ou simplement en installant "identity-obj-proxy" avec cette configuration devrait fonctionner :

npm install --save-dev identity-obj-proxy

jest.config.js (pour les modules CSS) :

{ "jest": { "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)$": "identity-obj-proxy" } } }

En outre, voici mon fichier .babelrc dans le répertoire racine du projet (test.config.js devrait également être à la racine):

Tout d'abord, pour utiliser babel, installez "babel-jest" et "regenerator-runtime":

npm --dev babel-jest babel-core regenerator-runtime

Ajoutez ensuite cette configuration au fichier .babelrc :

{ "presets": ["env", "react"], "plugins": ["transform-class-properties"], "env": { "production": { "plugins": ["transform-es2015-modules-commonjs"] }, "test": { "presets": ["env", "react"], "plugins": ["transform-export-extensions"], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } } }

J'espère que cela t'aides.
https://jestjs.io/docs/en/webpack.html

Dans mon cas, cela fonctionne après avoir ajouté les .babelrc

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

puis lancez le test en utilisant NODE_ENV=test jest

Cela n'aidera que CERTAINES personnes.

Mon problème était dû au fait que jest ne pouvait pas analyser mon fichier JS. J'ai utilisé require place.

Les gars. Aucune de ces solutions ne fonctionne car je n'ai pas de fichier babelrc... seulement babel.config.js. S'il vous plaît, comment corrigez-vous avec babel.config.js ? Merci

J'ai essayé beaucoup de choses de la discussion ci-dessus pour les configurations babel ainsi que quelques options supplémentaires d'autres recherches (telles que les options esm ) - rien n'a fonctionné. Le mot-clé import a continué à donner une erreur de plaisanterie. Il est triste que tester un module avec des importations es6 soit si difficile.

Enfin c'est ce qui a fonctionné pour moi : ts-jest

Maintenant, je n'utilise aucun script dactylographié dans mon code en tant que tel, mais j'ai quand même utilisé le ts-jest (puisque le dactylographe prend en charge en interne les importations et toutes les autres choses). C'est juste pour que la plaisanterie comprenne bien le code javascript.

A suivi ces étapes:
npm i -D jest typescript ts-jest @types/jest
Dans le fichier jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest peut se plaindre du fait que le type de script n'autorise pas la conformité des fichiers js . Ajoutez le fichier tsconfig.json avec les options ci-dessous :
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Suppression de toutes les configurations et fichiers liés à babel . La configuration de npm ressemble à ci-dessous :
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
J'espère que cela aidera toute personne confrontée à un problème similaire avec les importations.

Quelqu'un a-t-il un référentiel nu qui a une configuration de travail utilisant les importations JS?

Quelqu'un a-t-il un référentiel nu qui a une configuration de travail utilisant les importations JS?

https://github.com/kasvtv/react-starter

En tant que personne qui a trouvé cette page en recherchant un problème similaire qui n'est probablement pas pertinent pour la discussion d'origine. Mon problème a fini par être dû à l'utilisation des importations dynamiques de type fonction décrites par https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. Cela a fini par être résolu en ajoutant le plugin babel pour cette fonctionnalité disponible sur https://github.com/airbnb/babel-plugin-dynamic-import-node et en modifiant le .babelrc en conséquence.

{
    ...
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    ...
}

je viens de supprimer l'option :{ module:false }, puis ça marche

"presets": [
    ["@babel/env", {module: false} ],  
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]

l'ajout de transformIgnorePatterns: [] à la configuration de jest et de transform-es2015-modules-commonjs à babelrc a résolu le problème pour moi.
blague : ^23.1.0,
babel: 6.26.3

@ngmgit mais cela signifie que vous transpilez tous vos node_modules, ce qui n'est pas très optimal...

Dans mon cas,
.babelrc ne fonctionne pas mais j'ai résolu le problème en déplaçant le même paramètre dans .babelrc vers babel.config.js .

j'espère que ça a aidé !

Rien de TOUT ce qui est ici ne fonctionne pour moi. Je ne peux pas croire qu'une bibliothèque de test officielle de Facebook pour tester les applications React soit aussi difficile à configurer, je suis un développeur avec plus de 8 ans d'expérience et j'ai passé 5 heures de ma journée sans succès à résoudre tant de problèmes et de questions en cas de débordement de la pile.

je ne peux tout simplement pas configurer mon application de réaction pour qu'elle fonctionne avec jest + react-testing-library

c'est UNIQUEMENT parce que la plaisanterie me crie à chaque fois une nouvelle erreur de syntaxe qu'il ne peut pas traiter. Chaque plugin que j'utilise résout un problème et en donne un autre. Y a-t-il moyen de faire en sorte que Babel s'occupe de tout ?

J'en ai sincèrement fini avec ce que j'ai vraiment abandonné, je ne passe plus plus de temps là-dessus, je vais probablement annuler l'ajout de cette bibliothèque sur le projet.

Sérieusement, il est très étrange de voir qu'il n'y a AUCUNE configuration par défaut pour QUELQU'UN qui souhaite tester une application de réaction à l'aide de jest + react-testing-library.

après des heures d'essais et d'erreurs avec de nombreuses réponses SO et problèmes de github, la réponse de @cpojer a fonctionné pour moi ! ??

MISE À JOUR avec les dernières et les meilleures avec un contexte supplémentaire qui m'a aidé :

babel.config.js

module.exports = {
  "env": {
    "production": {
-      "plugins": ["transform-es2015-modules-commonjs"]
# new kid on the block
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

jest.config.js

module.exports = {
  // if you're also using typescript
  preset: "ts-jest",
  testEnvironment: "node",
  verbose: true,
  // registers babel.config.js with jest
  transform: {
    "^.+\\.js$": "babel-jest",
  },
  // explicitly include any node libs using ESM modules
  transformIgnorePatterns: ["node_modules/?!(<ESM module here>|<another here>|<etc...>)"],
}

Dépendances :

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (pour tapuscrit)

Ce problème peut également se produire lorsque vous n'exécutez pas jest dans le répertoire racine du projet...

Si vous utilisez des préréglages react-native ou jest-expo et que vous avez des fichiers .js dans votre projet, vous devez définir transform pour qu'ils correspondent dans la configuration de jest.
J'ai utilisé une expression de https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer--pathtotransformer-object et cela a fonctionné.

transform: { '^.+\\.[jt]sx?$': 'babel-jest' }

prise en charge pnpm

Je veux laisser une note ici pour les utilisateurs de pnpm....

L'exemple suivant ne fonctionne pas pour les utilisateurs pnpm car les chemins pnpm sont différents. Les expressions régulières ci-dessus ne fonctionnent qu'avec les répertoires node_modules aplatis.

/xxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/input/String

Voir : https://regexr.com/5cs2h

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns -personnalisation

Réparer

Utilisez une anticipation négative pour la dernière occurrence en ajoutant .* .

node_modules/(?!(.*antd/es)/)