Jest: Unerwarteter Token-Import für ES6-Module

Ich habe das gleiche Problem mit React-Native und Jest,
Wenn Sie ein neues Projekt starten mit:
Reaktiv-native init AwesomeProject
cd AwesomeProject

dann installiere ein Modul wie npm install native-base --save
Importieren Sie eine beliebige Komponente von native-base in Ihre index.ios.js-Datei

npm test löst diesen Fehler aus:
../test/node_modules/native-base/index.js:4
Schublade aus './Components/vendor/react-native-drawer' importieren;
^^^^^^
SyntaxError: Unerwarteter Tokenimport

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

Ich habe das gleiche Problem, der Link @cpojer scheint nicht zu helfen

Hi! 'transformIgnorePatterns' tut....mmmm...das muss es tun - ignorieren)
Aber wie kann ich diesen Import im Paket von node_modules verwenden?

Diese Requisiten haben mir geholfen :)

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

UPD1
Derzeit ist meine Jest-Konfiguration:

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

... und bei mir funktioniert es :)

Mit freundlichen Grüßen, Pavel Tretyakov

Hallo Leute, ich habe immer noch dieses Problem, aber ich benutze nicht Reactive Native. Das Problem wird immer mit jest --no-cache behoben. Gibt es eine Möglichkeit, Scherze mit Cache zum Laufen zu bringen, ohne diesen Fehler auszulösen?

Ich kann diese Transformation nicht mit meiner Create-React-App-Anwendung zum Laufen bringen. Erhalten Sie immer "Unerwarteter Token-Import" bei allen Testdateien, die ES6-Import enthalten. Ich habe alle Vorschläge ausprobiert, die ich finden konnte. No-Cache hat keine Auswirkung. Ich kann diese Dateien bei der Transformation offensichtlich nicht ignorieren (sie müssen transformiert werden!).

Ich gebe auf. Geben Sie gerne alle erforderlichen Informationen.

Ich scheine auch dieses Problem zu haben.

Hier gilt das gleiche

Hier gilt das gleiche

Sie alle werden wahrscheinlich auf dieses Problem stoßen, weil ES-Module in Node nicht unterstützt werden und Sie absichtlich aufgehört haben, sie mit Ihrer Build-Pipeline (Webpack, Rollup) zu kompilieren, wenn Sie sie an den Browser senden.

Sie müssen die Kompilierung von ES-Modulen nach CommonJS für die "test" -Umgebung in Ihrem babelrc aktivieren, siehe https://babeljs.io/docs/usage/babelrc/#env -option und https://babeljs.io/docs/ plugins/transform-es2015-modules-commonjs/

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

Danke für deine Antwort, cpojer. Gestern habe ich meine Node-Env-Einstellungen entfernt und es mit Standard-Node-Env laufen lassen, weil Jest global funktionierte, aber nicht mit Node-Skripten. Es schien das Problem zu lösen, daher glaube ich, dass mein Problem mit den Node-Env-Einstellungen lag. Aber es ist immer noch etwas zu überwachen.

EDIT: Das hat gar nicht funktioniert. @cpojer 's Fix funktionierte wie ein Zauber. Vielen Dank.

@cpojers Fix hat bei mir funktioniert, danke

Super, hat bei mir auch funktioniert, danke!

Ich habe ein ähnliches Problem in meiner relativ einfachen nativen Reaction-App.

Beim Ausführen von npm test oder jest dies 'SyntaxError: Unexpected token import'

.babelrc

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

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

Geht das von @cpojer vorgeschlagene
Sorry, wenn es wirklich offensichtlich ist!
Jede Hilfe wäre toll, danke

@JessicaBarclay es sollte in Ihrer .babelrc-Konfiguration enthalten sein. So was:

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

Ahh Danke @rlage ! Sortiert :)

FWIW, ich hatte tatsächlich mein .babelrc mit den richtigen presets und plugins unter einer Testumgebung eingerichtet, wie @cpojer vorgeschlagen hatte, hatte aber vergessen, NODE_ENV=test einzubeziehen NODE_ENV=test in meiner Skriptzeile in package.json .

Vorher fehlgeschlagen mit "Unerwarteter Token-Import":

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

Nach erfolgreicher Umwandlung von Dateien:

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

@jlyman

Basierend auf der Jest-Dokumentation sollte es nicht benötigt werden, da Jest die NODE_ENV auf test by defult setzt.

Hinweis: Wenn Sie eine kompliziertere Babel-Konfiguration verwenden und die Option env von Babel verwenden, denken Sie daran, dass Jest automatisch NODE_ENV als Test definiert. Es wird keinen Entwicklungsabschnitt verwenden, wie es Babel standardmäßig tut, wenn kein NODE_ENV gesetzt ist.

Diese .babelrc hat bei mir funktioniert:

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

HINWEIS: es sieht seltsam aus , aber beide Entwicklungs- und Testschlüssel müssen vorhanden sein, sonst wird es nicht funktionieren.

Dann rufe ich einfach an:

node_modules/.bin/jest

oder mit package.json:

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

NODE_ENV muss nicht zum Testen festgelegt werden.

@laszbalo Interessant, die Anwesenheit dieses zweiten env scheint den Zweck zu erfüllen . Wenn ich eine Entwicklungsumgebung hinzufüge und das explizite Präfix NODE_ENV aus meinen Skripten herausnehme, funktioniert es. Ich hatte diesen Teil der Dokumentation auch gelesen, bin aber bei dieser Lösung gelandet, da sie funktioniert hat.

@jlyman welche Lösung in den Dokumenten?

@doudounannan Entschuldigung, wenn das nicht klar war. Die Lösung, die ich am Ende genommen habe, war die, die ich hier gepostet habe . Wie @laszbalo sagte, die Dokumente unter Using Babel sagen , aber entweder die Lösung von @laszbalo oder meine direkte Injektion von NODE_ENV test scheinen zu funktionieren.

Seltsamerweise, wenn ich "transformIgnorePatterns": [ ] transformiert babel meine getesteten Dateien, aber wenn ich die Option transformIgnorePatterns dann tut babel nichts ... Ich habe eine einfache .babelrc nur zum Testen (I Verwenden Sie Webpack für die Produktion, aber nicht für die Tests von Jest):

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

Ich habe die Idee von https://github.com/facebook/jest/issues/2550#issuecomment -290812720 da nichts anderes in #770 oder hier zu helfen schien ...

Egal was ich mache, es ist immer der gleiche Fehler:

    /.../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$"
}

Ich habe das gleiche Problem. Folgendes habe ich zu meinem Scherz hinzugefügt

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

und jetzt bekomme ich die folgende Fehlermeldung, wenn ich Jest starte:

ReferenceError: Unbekanntes Plugin "transform-replace-object-assign" angegeben in "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" bei 0, versucht relativ zu "/Users/caalcaz/ aufzulösen" Dokumente/Projekte/Enterprise-App/node_modules/enzyme"

@calcazar was ist in deinen node_modules/enzyme/.babelrc?

Ich habe es gelöst, indem ich babel-jest _and_ ts-jest verwendet habe. In 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
},

Dann in .babelrc (die ich nur zum Testen verwende)

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

hoffe das hilft jemandem! (Dies ist für eine Aurelia-App, also YMMV)

@thinkOfaNumber

Dies ist, was ich sehe. als FYI verwende ich Enzyme V3.0

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

@thinkOfaNumber vielen Dank für die Veröffentlichung Ihres Vorschlags. Ich habe es verwendet, um herauszufinden, wie man es6-Module aus einer externen Bibliothek bekommt, um sie im Scherz zu kompilieren. Der Schlüssel ist hier

"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

Das ist der Teil, den ich brauche. Ich danke dir sehr!

@rochapablo an der gleichen Stelle. Etwas Glück?

Nein, im Moment ignoriere ich den spezifischen Dateitest, der den Fehler auslöst

Folgend. Ich habe das gleiche Problem und bisher scheint es nichts zu lösen.

Folgen auch

@rochapablo Haben Sie dieses Problem erfolgreich
Ich kann auch keine Komponente testen, die als Kind GiftedChat wegen eines von Ihnen erwähnten Problems ...

@todorone , versuche hinzuzufügen:

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

@rochapablo Danke für den Hinweis, aber leider hat es nicht geholfen. Ich habe sogar versucht, mit transformIgnorePatterns Regexes weiterzuspielen, aber es hat nicht geholfen.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
füge das obige zu Scherz hinzu

@rochapablo Hast du die Voreinstellung jest-expo ausprobiert? Etwas Glück? Ich bin damit auf ein weiteres Syntaxproblem gestoßen & transformIgnorePatterns

Funktioniert bei mir immer noch nicht. Ich bekomme den verdammten Importfehler.

@testacode das ist ein dynamisches import , hast du das notwendige Babel-Plugin hinzugefügt? Siehe unten auf https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB danke, das hat mir gefehlt!

Es ist interessant. Ein kürzlich durchgeführtes Update entfernte das automatische Hinzufügen von babel-jest. Also läuft:

npm install babel-jest --save-dev

und das Hinzufügen von NICHTS ELSE in der Konfiguration hat das Problem für mich behoben. Ich denke, es sollte in einer Fehlermeldung klarer sein, dass es nicht mehr enthalten ist ...

Ich habe es einfach gelöst, indem ich babel-jest installiert habe:
npm i babel-jest

Vergessen Sie auch nicht, eine .babelrc Datei mit folgendem Inhalt zu erstellen:

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

Das funktioniert bei mir:

.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 bei mir hat es funktioniert, danke

Für mich hatte ich das in meiner .babelrc Datei:

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

Und ich musste nur sicherstellen, dass die "Test" -Umgebung stattdessen Module verwendet:

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

@nemoDreamer Es ist besser, Plugins und Presets nicht in einer Konfiguration zu wiederholen

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

Was auch immer ich versuche, ich habe einen Fehler.

> 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

Hier sind meine Konfigurationsdateien.

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

Paket.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

Wenn Sie die Voreinstellung in .babelrc einstellen, stellen Sie sicher, dass "env" in Klammern steht ["env"] , wie folgt:

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

besonders wenn Sie "modules: false" in Ihrer Konfiguration haben.

Außerdem transformiert jest standardmäßig https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

Aus diesem Grund funktionieren import ... in node_modules Dateien nicht. Um dies zu deaktivieren, können Sie Folgendes hinzufügen:

transformIgnorePatterns: []

zu deiner jest config.

Hoffe das hilft!

@florentchauveau Danke, diese Arbeit für mich.

@todorone @rochapablo Habt ihr eine Lösung dafür gefunden? Auch ich stehe vor dem gleichen Problem-

    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)

Ich erhalte diesen Fehler nur bei den Tests der Komponenten mit
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
Vielleicht liegt das daran, dass @expo/react-native-action-sheet als ES6-Modul ausgeliefert wird und GiftedChat es intern verwendet? Aber jest / ts-jest (ich bin mir nicht sicher) sollten damit umgehen, wenn die Voreinstellungen hinzugefügt werden. Hier ist meine Jest-Konfiguration -

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

und die .babelrc -

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

Ich habe fast alle oben genannten Lösungen ausprobiert. Keiner von ihnen hat in meinem Szenario funktioniert. Hilfe benötigt.

@omkarjoshi-cc Das einzige, was zu der Zeit, an der ich arbeitete, für mich funktionierte, war das Hinzufügen des Pakets, das den Fehler auslöste, was in meinem Fall war:

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

@rochapablo Ja. Ich versuchte es. Hat nicht funktioniert. Gibt es sonst noch etwas, das fehlen könnte? Das ist echt frustrierend 😓

Ich benutze babel 7 und auch ich hatte noch kein Glück mit "transformIgnorePatterns" - habe viele verschiedene reguläre Ausdrücke ausprobiert :/

Das Problem, das ich habe, ist, dass eine Abhängigkeit native es6-Klassen enthält und ich eine Klasse in meiner Quelle habe, die sie erweitert. Da von Babel transpilierte "es5-Klassen" eine native Klasse nicht erweitern können, erhalte ich im Scherz einen Laufzeitfehler.

Ich begann zu denken, dass "babel/preset-env" irgendwie im Weg steht, wie der Code zu Scherz (Zielknoten) transpiliert wird, der möglicherweise nicht den Browserzielen folgt, aber ich bin mir immer noch nicht sicher.

Weiß jemand, wie man zum Spaß alles auf es5 erzwingt, wenn man 'present-env' in .babelrc verwendet?

Die einzige Problemumgehung, die ich mir vorstellen kann, ist, babel-jest nicht zu verwenden, Webpack zu durchlaufen (das babel-loader verwendet und die Regeln, in die Dateien umgewandelt werden sollen, haben für mich funktioniert) und dann jest ausführen -> ich denke darüber nach, webpack -w und scherze, sieh dir das transpilierte an..)

Hinzufügen

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

hat bei mir funktioniert. Danke an @rochapablo 🙌

Ich kämpfe mit diesem Problem. Sollte mein Ausgabeordner, der getestet wird, eine ES6-Syntax mit import usw. sein oder kann das scherzhaft nicht getestet werden? Ich sehe keine Commonjs in meiner/n Ausgabedatei/-dateien (mit React-native verwenden)

Ich stehe vor dem gleichen Problem und diese Seite löst das Problem:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

Aus irgendeinem Grund hat es anstelle von babel-jest mit dem folgenden für mich funktioniert (anscheinend die transformIgnorePatterns respektieren)

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

btw sollte dieses Thema hier wieder geöffnet werden, oder? viele Menschen mit Schwierigkeiten

In meinem Fall stellte sich heraus, dass dieses Problem durch das Ignorieren von Testdateien in meiner Babel-Konfiguration verursacht wurde. Aus anderen Gründen hatte ich "ignore": ["**/*.test.js"] in meiner .babelrc.

Die Lösung bestand darin, die Option ignorieren nur für die Produktionsumgebung festzulegen, dh:

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

Alternativ können Sie ein spezielles Ignorier-Muster für die Testumgebung angeben.

Nachdem ich viel probiert habe, hier ist mein Fall

1. Stellen Sie sicher, dass Sie die richtigen Versionen von babe-jest haben *
2. Stellen Sie sicher, dass Sie die .babelrc-Konfiguration mit Voreinstellungen haben (zuvor installiert)
3. Wenn der Fehler "unerwartetes Token" immer noch ausgegeben wird, werden möglicherweise Pfeilfunktionen nicht erkannt, dieses Babel-Plugin hilft Ihnen, "transform-class-properties" auch in Ihre Babel-Konfiguration aufzunehmen.

hier sind meine configs.

.babelrc

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

für Enzym(setupTests.js)

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

Paket.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 hinzufügen hat bei mir funktioniert

In meinem Fall war es ein Problem mit Windows und seinen dummen Berechtigungen, wahrscheinlich die env-Variablen nicht richtig eingestellt.
Von git bash zu einem erhöhten cmd.exe und wieder angefangen zu arbeiten.

Ich habe jest als script (in test:jest in test ), in meinem package.json . Wenn ich jedoch npm run test , erhalte ich 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

Ich habe auch ein entsprechendes 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'
  ]
}

Ich sehe viele Dinge über react-native und transformIgnorePatterns . Zum Glück und Unglücklicherweise benutze ich das nicht. Was für ein schwer fassbarer Bug das ist. Muss ich .babelrc oder eine jest Direktive in meinem package.json hinzufügen. Woher weiß mein Scherz script von Babel, wenn dies der Fall ist? Ich habe versucht, ein .babelrc hinzuzufügen, im selben Verzeichnis, das meine package.json , ohne Erfolg:

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

Hinweis: Wenn jemand mein ursprüngliches Problem bezüglich des oben genannten Problems verfolgen möchte.

Nach langem Herumtollen habe ich folgende Probleme festgestellt:

• Jest führt standardmäßig Babel 6 aus. Babel 6 sucht nicht nach einer .babelrc.js Datei. Nur für eine .babelrc Datei. Wenn Sie eine JS-Konfiguration anstelle von JSON haben, wird die Konfiguration nicht gelesen und daher keine Plugins verwendet. Dies führte zu den unexpected token: import für mich.
• babel-7-jest läuft auf einer alten Babel-7-Core-Engine, wodurch die Unterstützung für neuere Proposal-Plugins unterbrochen wird.
• Es scheint, dass npm i -D [email protected] DAS PROBLEM VOLLSTÄNDIG BEHEBT . Ich habe nicht einmal env.test in meiner Babel-Konfiguration, noch habe ich irgendeine scherzhafte Konfiguration.

Es scheint, als ob Jest nach babel-core sucht (und somit @babel/core ignoriert), andernfalls fällt es auf Babel 6 zurück und überspringt Ihre Konfiguration. Aber wenn der neueste Babel-Core (Bridge-Version) installiert ist, analysiert er ES6-Module ohne zusätzliche Konfiguration.

Danke kasvtv! Habe mein .babelrc.js in .babelrc geändert und npm i -D [email protected] installiert. Jetzt laufen meine Tests mit babel-jest

Sie können sicher eine .js-Konfigurationsdatei verwenden. Nur liest Babel diesen Dateityp erst ab Version 7 und Sie benötigen [email protected], damit Jest Version 7 von Babel verwenden kann.

Falls es jemand interessiert, ich habe meine Scherz + Enzymtests zum Laufen gebracht. Zögern Sie nicht, in entsprechenden Konfigurationsdateien zu stöbern. Hat jemand Interesse, bei der Frontend-Entwicklung für dasselbe Projekt mitzuhelfen?

Hatte ein ähnliches Problem aufgrund von antd und rc-calendar usw. Bibliotheken, die Module nicht importieren konnten, die Lösung war die Konfiguration von transformIgnorePatterns

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

Vielleicht hat auch moduleDirectories geholfen:

moduleDirectories: ['node_modules'],

Ich habe auf die neueste reaktive Version aktualisiert und musste auf Babel 7 aktualisieren und erhalte jetzt den gleichen Fehler.

Das Hinzufügen dieser node_modules zu transformIgnorePatterns scheint nichts mehr zu bewirken.

In meinem Fall liegt es daran, dass ich keine Module mehr mit Babel transpiliere, und es gibt einen Hinweis in der Anleitung für die ersten Schritte, wie Sie diese wieder in den test Teil Ihres babelrc einfügen.

@kasvtv @willb335 Ich benutze einen Trick, um Babel 6 dazu zu bringen, .babelrc.js zu erkennen:

Paket.json

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

Ich treffe das gleiche Problem bei der Verwendung der @material/base-Bibliothek. Könnte jemand die Datei package.json & .babelrc zur Verfügung stellen, um sie zu lösen. Ich versuche es mit den obigen Rückmeldungen, aber ich habe es verwechselt ...

Die Lösung für mich bestand darin, die Voreinstellung "env" zur .babelrc-Datei hinzuzufügen, also stellte sich heraus, dass es so war
{
"presets": ["env", "es2016", "stage-0", "react"]
}

Die Verwendung dieser Link-Info hat mein Problem gelöst
https://jestjs.io/docs/en/webpack.html

@negarineh dein Link funktioniert nicht

Mit der von @haywirez bereitgestellten transformIgnorePatterns Lösung wird mein

SyntaxError: Unexpected token import

Fehler in ein

TypeError: Cannot read property 'DocumentDir' of undefined

Fehler. Dh das Paket (rn-fetch-blob) ist jetzt undefiniert.

Bearbeiten:

Tatsächlich führt nur das Hinzufügen von transformIgnorePatterns: [], zu meinem jest.config.js dass der SyntaxError zum TypeError wechselt.

@schumannd Entschuldigung, ich habe einen Fehler gemacht, der Link leitet Sie jetzt auf die Seite weiter. Wenn Sie Ihre "jest.config.js" mit der im Link bereitgestellten Konfiguration festlegen, sollte es funktionieren.
Wenn es sich bei dem Fehler um den Import einer .css-Datei handelt, sollte das Hinzufügen einer Mock-Datei wie im Beispiel im Link oder einfach durch die Installation von "identity-obj-proxy" mit dieser Konfiguration funktionieren:

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

jest.config.js (für CSS-Module):

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

Dies ist auch meine .babelrc-Datei im Stammverzeichnis des Projekts (test.config.js sollte sich auch im Stammverzeichnis befinden):

Um babel zu verwenden, installiere zuerst "babel-jest" und "regenerator-runtime":

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

Fügen Sie dann diese Konfiguration zur .babelrc-Datei hinzu:

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

Hoffe das hilft.
https://jestjs.io/docs/en/webpack.html

In meinem Fall funktioniert es nach dem Hinzufügen der folgenden .babelrc

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

und dann test mit NODE_ENV=test jest ausführen

Dies wird nur einigen Leuten helfen.

Mein Problem lag daran, dass ich meine JS-Datei nicht analysieren konnte. Ich habe stattdessen require verwendet.

Leute. Keine dieser Lösungen funktioniert, weil ich keine babelrc-Datei habe ... nur babel.config.js. Bitte, wie beheben Sie das Problem mit babel.config.js? Vielen Dank

Viele Dinge aus der obigen Diskussion in Bezug auf babel Konfigurationen sowie einige zusätzliche Optionen aus anderen Suchvorgängen (wie esm Optionen) ausprobiert - nichts hat funktioniert. Das Schlüsselwort import gab weiterhin Fehler von scherzhaft aus. Es ist traurig, dass das Testen eines Moduls mit es6-Importen so schwierig ist.

Endlich hat das bei mir funktioniert: ts-jest

Jetzt verwende ich in meinem Code kein Typoskript als solches, aber trotzdem das ts-jest (da Typoskript intern Importe und alle anderen Dinge unterstützt). Dies ist nur, damit der Witzbold den Javascript-Code richtig versteht.

Befolgt diese Schritte:
npm i -D jest typescript ts-jest @types/jest
In der jest.config.js Datei:
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest kann sich darüber beschweren, dass Typoskript es nicht zulässt, dass js Dateien kompiliert werden. Fügen Sie die Datei tsconfig.json mit den folgenden Optionen hinzu:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Alle babel zugehörigen Konfigurationen und Dateien entfernt. Die Konfiguration von npm sieht wie folgt aus:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
Ich hoffe, dies hilft jedem, der mit ähnlichen Problemen bei Importen konfrontiert ist.

Hat jemand ein Bare-Bones-Repository, das ein funktionierendes Setup mit JS-Importen hat?

Hat jemand ein Bare-Bones-Repository, das ein funktionierendes Setup mit JS-Importen hat?

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

Als jemand, der diese Seite bei der Suche nach einem ähnlichen Problem gefunden hat, das für die ursprüngliche Diskussion wahrscheinlich irrelevant ist. Mein Problem war letztendlich auf die Verwendung der funktionsähnlichen dynamischen Importe zurückzuführen, die von https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports beschrieben wurden https://github.com/airbnb/babel-plugin-dynamic-import-node verfügbar ist, und die .babelrc entsprechend modifiziert wurde.

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

Ich entferne einfach die Option: { module: false }, und dann funktioniert es

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

Das Hinzufügen von transformIgnorePatterns: [] zu jest config und transform-es2015-modules-commonjs zu babelrc löste das Problem für mich.
Witz: ^23.1.0,
Baby: 6.26.3

@ngmgit, aber das bedeutet, dass Sie alle Ihre node_modules transpilieren, was nicht sehr optimal ist ...

In meinem Fall,
.babelrc funktioniert nicht, aber ich habe das Problem gelöst, indem ich dieselbe Einstellung in .babelrc nach babel.config.js .

hoffe es hat geholfen!

Nichts von ALLEM, was hier ist, funktioniert für mich. Ich kann nicht glauben, dass die offizielle Testbibliothek von Facebook zum Testen von React-Anwendungen so schwer zu konfigurieren ist. Ich bin ein Entwickler mit mehr als 8 Jahren Erfahrung und habe 5 Stunden meines Tages erfolglos damit verbracht, so viele Probleme und Fragen durchzuarbeiten bei Stapelüberlauf.

Ich kann meine React-Anwendung einfach nicht so konfigurieren, dass sie mit Jest + React-Testing-Library funktioniert

das liegt NUR daran, dass Jest mir jedes Mal einen neuen Syntaxfehler zuschreit, den er nicht verarbeiten kann. Jedes Plugin, das ich verwende, löst ein Problem und gibt ein anderes. Gibt es eine Möglichkeit, Babel dazu zu bringen, alles zu handhaben?

Ich bin aufrichtig damit fertig, dass ich wirklich aufgegeben habe, ich verbringe keine Zeit mehr damit, ich werde wahrscheinlich das Hinzufügen dieser Bibliothek zum Projekt abbrechen.

Im Ernst, es ist sehr seltsam zu sehen, dass es KEINE Standardkonfiguration für JEDEN gibt, der eine React-Anwendung mit jest + React-Testing-Library testen möchte.

Nach stundenlangem Ausprobieren mit vielen SO-Antworten und Github- Problemen hat die Antwort von

AKTUALISIERT mit den neuesten und besten mit zusätzlichem Kontext, der mir geholfen hat:

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

Abhängigkeiten:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (für Maschinenschrift)

Dieses Problem kann auch auftreten, wenn jest nicht im Stammverzeichnis des Projekts ausgeführt wird...

Wenn Sie react-native oder jest-expo Voreinstellungen verwenden und .js Dateien in Ihrem Projekt haben, sollten Sie transform entsprechend in der jest-Konfiguration einstellen.
Ich habe einen Ausdruck von https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer--pathtotransformer-object verwendet und es hat funktioniert.

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

pnpm-Unterstützung

Ich möchte hier eine Notiz für pnpm-Benutzer hinterlassen....

Das folgende Beispiel funktioniert nicht für pnpm-Benutzer, da sich die pnpm-Pfade unterscheiden. Die obigen Regexes funktionieren nur mit abgeflachten node_modules Verzeichnissen.

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

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

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

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

Fix

Verwenden Sie einen negativen Lookahead für das letzte Vorkommen, indem Sie .* hinzufügen.

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