Jest: ES6モジュールの予期しないトークンのインポート

React-NativeとJestでも同じ問題があります。
次のコマンドで新しいプロジェクトを開始する場合：
react-native init AwesomeProject
cd AwesomeProject

次に、npm install native-base--saveのようなモジュールをインストールします
ネイティブベースからindex.ios.jsファイルにコンポーネントをインポートします

npmテストはこのエラーをスローします：
../test/node_modules/native-base/index.js:4
'./Components/vendor/react-native-drawer'からドロワーをインポートします。
^^^^^^
SyntaxError：予期しないトークンのインポート

http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customizationを参照して

私は同じ問題を抱えています、 @ cpojerが提供したリンクは

やあ！ 'transformIgnorePatterns'は.... mmmm ...実行する必要があります-無視します）
しかし、node_modulesからパッケージ内のそのインポートをどのように使用できますか？

この小道具は私を助けました:)

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

UPD1
現在、私のJest設定は次のとおりです。

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

...そしてそれは私のために働いています:)

よろしく、パーヴェル・トレチャコフ

こんにちはみんな、私はまだこの問題を抱えていますが、私はreactnativeを使用していません。 この問題は常にjest--no-cacheを使用して修正されます。 このエラーをスローせずに、キャッシュを使用してjestを機能させる方法はありますか？

この変換をcreate-react-appアプリケーションで機能させることができません。 ES6インポートを含むテストファイルでは、常に「予期しないトークンインポート」を取得します。 私は見つけたすべての提案を試しました。 キャッシュなしは影響を与えません。 私は明らかにこれらのファイルを変換から無視することはできません（それらは変換される必要があります！）。

あきらめる。 必要な情報を喜んで提供します。

私もこの問題を経験しているようです。

こっちも一緒

こっちも一緒

ESモジュールはNodeでサポートされておらず、ブラウザーに出荷するときにビルドパイプライン（webpack、rollup）でのコンパイルを意図的に停止したため、この問題が発生している可能性があります。

babelrcの「テスト」環境でESモジュールからCommonJSへのコンパイルを有効にする必要があります。https ： //babeljs.io/docs/usage/babelrc/#env-optionおよびhttps://babeljs.io/docs/を参照してください。 plugins / transform-es2015-modules-commonjs /

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

ご回答ありがとうございます、cpojer。 昨日、ノード環境設定を削除し、デフォルトのノード環境で実行できるようにしました。これは、jestがグローバルに機能していたが、ノードスクリプトの使用中は機能していなかったためです。 問題は解決したようだったので、私の問題はnode-env設定にあったと思います。 しかし、それでも監視する必要があります。

編集：これはまったく機能しませんでした。 @cpojerの修正は魅力のように機能しました。 ありがとう。

@cpojerの修正は私のために働いた、ありがとう

素晴らしい、私のためにも働いた、ありがとう！

かなり単純なReactNativeアプリでも同様の問題が発生しています。

npm testまたはjestすると、 '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"
  }
}

@cpojerによって提案されたenvスニペットは.package.jsonに含まれていますか？
それが本当に明白であるならば申し訳ありません！
どんな助けでも素晴らしいでしょう、ありがとう

@JessicaBarclayそれはあなたの.babelrc設定に入るはずです。 このような：

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

ああありがとう@rlage ！ 並べ替え:)

FWIW、 @ cpojerが提案したようなテスト.babelrc正しいpresetsとpluginsで設定しましたが、 NODE_ENV=testを含めるのを忘れていました。 package.json 。

以前は、「予期しないトークンのインポート」で失敗しました。

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

その後、ファイルを正常に変換します。

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

@jlyman

Jestのドキュメントに基づくと、JestはNODE_ENVをデフォルトでテストするように設定しているため、これは必要ありません。

注：Babelのenvオプションを使用して、より複雑なBabel構成を使用している場合は、JestがNODE_ENVをテストとして自動的に定義することに注意してください。 NODE_ENVが設定されていない場合、Babelがデフォルトで使用するような開発セクションは使用されません。

この.babelrcは私のために働いたものです：

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

注：奇妙に見えますが、開発キーとテストキーの両方が存在する必要があります。存在しない場合、機能しません。

それから私はただ電話します：

node_modules/.bin/jest

またはpackage.jsonを使用：

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

テストするためにNODE_ENVを設定する必要はありません。

@laszbalo興味深いことに、その2番目のenv存在がうまくいくようです。 開発環境に追加して、スクリプトの明示的なNODE_ENVプレフィックスを削除すると、機能します。 私もドキュメントのその部分を読んだことがありましたが、それが機能したので、結局その解決策になりました。

@jlymanドキュメントのどのソリューションですか？

@doudounannanそれがはっきりしなかったら、すみません。 私が最終的に行った解決策は、私がここに投稿したものでし@laszbaloが言ったように、それはドキュメントが@ laszbaloのソリューションまたはNODE_ENV test私の直接注入のいずれかが機能しているようです。

不思議なことに、 "transformIgnorePatterns": [ ]を使用すると、babelはテスト済みのファイルを変換しますが、 transformIgnorePatternsオプションを除外すると、babelは何もしません...テスト専用の単純な.babelrcがあります（Iプロダクションにはwebpackを使用しますが、jestのテストには使用しません）：

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

https://github.com/facebook/jest/issues/2550#issuecomment -290812720からアイデアを得ました。これは、＃770またはここで他に何も役に立たなかったためです...

私が何をするかは関係ありません、それは常に同じエラーです：

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

私は同じ問題を抱えています。 私は私の冗談に以下を追加しました

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

Jestを実行すると、次のエラーが発生します。

ReferenceError：「/ Users / caalcaz / Documents / Projects / Enterprise-app / node_modules / enzyme / .babelrc」で指定された不明なプラグイン「transform-replace-object-assign」が0で、「/ Users / caalcaz /」を基準にして解決しようとしましたDocuments / Projects / Enterprise-app / node_modules / enzyme "

@calcazarあなたのnode_modules / enzyme / .babelrcには何がありますか？

私はbabel-jest_and_ts-jestを使用してそれを解決しました。 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
},

次に、.babelrc（私はテストにのみ使用します）

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

それが誰かを助けることを願っています！ （これはaureliaアプリ用なのでYMMV）

@thinkOfaNumber

これが私が見ているものです。 参考までに、私はEnzymeV3.0を実行しています

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

@thinkOfaNumber提案を投稿して

"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

これは私がそれを必要とする部分です。 どうもありがとう！

同じ場所に@rochapablo 。 運が良ければ？

いいえ、今のところ、エラーをスローする特定のファイルテストを無視しています

続く。 私は同じ問題を抱えていますが、これまでのところ何も解決していないようです。

フォローも

@rochapabloこの問題の解決に
あなたが言及した問題のため、私は子としてGiftedChatを持つコンポーネントもテストできません...

@todorone 、追加してみてください：

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

@rochapabloヒントをありがとう、しかし残念ながらそれは役に立ちませんでした。 transformIgnorePatterns正規表現でさらに遊んでみましたが、役に立ちませんでした。

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
上記を冗談に追加します

@rochapablo jest-expoプリセットを試しましたか？ 運が良ければ？ 私はそれとtransformIgnorePatterns別の構文の問題に遭遇しました

それでも私にはうまくいきません。 いまいましいインポートエラーが発生します。

動的なimportである@testacode 、必要なbabelプラグインを追加しましたか？ https://facebook.github.io/jest/docs/en/webpack.html#using-with-webpack-2の下部を参照してください

@SimenBありがとう、それは私が欠けていたものです！

それは面白いです。 最近の更新により、babel-jestの自動追加が削除されました。 だから実行中：

npm install babel-jest --save-dev

設定に他に何も追加しないと、問題が修正されました。 エラーメッセージで、それがもう含まれていないことをより明確にする必要があると思います...

私はbabel-jestをインストールするだけで解決しました：
npm i babel-jest

また、次の内容の.babelrcファイルを作成することを忘れないでください。

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

これは私のために働きます：

.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それは私のために働いた、ありがとう👍

私の場合、 .babelrcファイルにこれがありました。

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

そして、「テスト」環境が代わりにモジュールを使用していることを確認するだけで済みました。

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

@ nemoDreamer1つの構成でプラグインとプリセットを繰り返さないことをお

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

何をしようとしても、エラーが発生しました。

> 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

これが私の設定ファイルです。

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

プリセットを.babelrcに設定するとき"env"が角かっこ["env"]間にあることを確認してください。

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

特に、構成に"modules: false"がある場合。

また、デフォルトでは、 jestはnode_modulesファイルを変換しません。https： //facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns-array-stringを参照して

そのため、 import ...はnode_modulesファイルでは機能しません。 これを無効にするには、次を追加できます。

transformIgnorePatterns: []

あなたのjest設定に。

お役に立てれば！

@florentchauveauありがとう、この仕事は私のために。

@todorone @rochapablo皆さんはこれに対する解決策を見つけましたか？ 私も同じ問題に直面しています-

    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)

を使用したコンポーネントのテストでのみこのエラーが発生します
GiftedChat - https：//github.com/FaridSafi/react-native-gifted-chat。
おそらくこれは、 @expo/react-native-action-sheetがES6モジュールとして出荷されており、 GiftedChatが内部で使用しているためですか？ しかし、プリセットが追加された場合、 jest / ts-jest （よくわかりません）がそれを処理するはずです。 これが私の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"
    },

と.babelrc -

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

私は上記のほとんどすべての解決策を試しました。 それらのどれも私のシナリオでは機能しませんでした。 助けが必要です。

@ omkarjoshi-cc私が取り組んでいたときに私のために働いた唯一のことは、エラーを発生させていたパッケージを追加することでした。私の場合は次のとおりです。

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

@rochapabloうん。 私はそれを試してみました。 動作しませんでした。 他に見逃しているものはありますか？ これは本当にイライラします😓

私はbabel7を使用していますが、私も「transformIgnorePatterns」を使用できませんでした。さまざまな正規表現を試しました：/

私が抱えている問題は、1つの依存関係にネイティブのes6クラスがあり、それを拡張するクラスがソースにあることです。 Babelによってトランスパイルされた「es5クラス」はネイティブクラスを拡張できないため、jestでランタイムエラーが発生します。

どういうわけか「babel / prefix-env」がコードがjest（ターゲットノード）にトランスパイルされる方法の邪魔になっていると思い始めました。これはブラウザのターゲットに従わない可能性がありますが、それでもわかりません。

.babelrcで「present-env」を使用するときに、jestのためにすべてをes5に強制する方法を知っている人はいますか？

私が考えることができる唯一の回避策は、babel-jestを使用せず、webpack（babel-loaderを使用し、変換するファイルのルールが機能する）を実行してから、jestを実行することです-> webpack -w使用を考えてい

追加する

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

私のために働いた。 @rochapabloに感謝し

私はこの問題に苦しんでいます。 テストされている出力フォルダーは、 importなどのES6構文である必要がありますか、それともテストできませんか？ 出力ファイルにcommonjsが表示されません（react-nativeで使用）

私は同じ問題に直面していて、このページは問題を解決します：
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

何らかの理由で、 babel-jest代わりに、以下を使用すると、私にとってはうまくいきました（明らかにtransformIgnorePatterns尊重してください）

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

ところで、この問題はここで再開する必要がありますか？ 多くの人々が困難に直面しています

私の場合、この問題は、babel構成のテストファイルを無視したことが原因であることがわかりました。 関係のない理由で、.babelrcに"ignore": ["**/*.test.js"]がありました。

解決策は、実稼働環境に対して無視オプションのみを設定することでした。つまり、次のようになります。

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

または、テスト環境に特別な無視パターンを指定することもできます。

たくさん試した後、これが私の場合です

1. babe-jestの正しいバージョンがあることを確認してください*
2. プリセット（以前にインストールされた）を使用した.babelrc構成があることを確認してください
3. それでも「予期しないトークン」のエラーがスローされる場合は、矢印関数が認識されていない可能性があります。このbabelプラグインは、「transform-class-properties」がそれらをbabel構成に含めるのに役立ちます。

これが私の設定です。

.babelrc

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

酵素用（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これを追加するとうまくいきました

私の場合、それはWindowsとその愚かな権限の問題であり、おそらくenv変数を正しく設定していませんでした。
gitbashから昇格されたcmd.exe切り替えて、再び作業を開始しました。

私が持っているjestのように定義script （名前を変更したtest:jestのようにtest ）私の中に、 package.json 。 ただし、 npm run testを実行すると、 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

対応する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'
  ]
}

react-nativeとtransformIgnorePatternsについてたくさんのことを見ています。 幸いなことに、そして不幸なことに、私はそれを使用しません。 これはなんととらえどころのないバグです。 .babelrcを定義する必要がありますか、それともpackage.json jestディレクティブを追加する必要がありますか。 もしそうなら、私の冗談scriptはどのようにしてバベルについて知っていますか？ package.jsonを含む同じディレクトリに.babelrcを追加しようとしましたが、運がありませんでした。

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

注：上記の問題に関する私の元の問題を誰かが追跡したい場合。

たくさんの浮気をした後、私は次の問題を見つけました：

• Jestはデフォルトでbabel6を実行します。 Babel 6は.babelrc.jsファイルを検索しません。 .babelrcファイルの場合のみ。 JSONの代わりにJS構成がある場合、構成を読み取らないため、プラグインは使用されません。 これは私にとってunexpected token: importになりました。
• babel-7-jestは古いBabel 7コアエンジンで実行されるため、新しいプロポーザルプラグインのサポートが中断されます。
• npm i -D [email protected]問題が完全に修正されたようです。 私のbabel設定にはenv.testさえありませんし、jest設定もありません。

Jestがbabel-core探しているように見えます（したがって、 @babel/coreを無視します）。そうでない場合は、Babel 6にフォールバックし、設定をスキップします。 ただし、最新のbabel-core（ブリッジバージョン）がインストールされると、追加の構成なしでES6モジュールが解析されます。

kasvtvに感謝します！ 私の変更.babelrc.jsに.babelrcとインストールnpm i -D [email protected] 。 今、私のテストはbabel-jest実行されます

.js構成ファイルを安全に使用できます。 Babelがこのタイプのファイルを読み取るのはバージョン7以降のみであり、JestがBabelのバージョン7を使用するには[email protected]が必要

誰かが興味を持っているなら、私は私の冗談と酵素テストを機能させました。 対応する構成ファイルを自由に調べてください。 また、同じプロジェクトのフロントエンド開発を手伝うことに興味がある人はいますか？

antdやrc-calendarなどのライブラリがモジュールのインポートに失敗したために同様の問題が発生しました。解決策は、 transformIgnorePatternsを構成すること

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

たぶんmoduleDirectories役に立ちました：

moduleDirectories: ['node_modules'],

最新のreact-nativeバージョンに更新し、babel 7に更新する必要がありましたが、同じエラーが発生します。

これらのnode_modulesをtransformIgnorePatterns追加しても、何も実行されなくなったようです。

私の場合、それは私がもはやBabelでモジュールをトランスパイルしていないためであり、それをあなたのbabelrcのtest部分に戻すことについてのスタートガイドにメモがあります。

@kasvtv @ willb335私は

package.json

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

@ material / baseライブラリを使用すると同じ問題が発生します。解決するために、誰かがpackage.jsonと.babelrcファイルを提供できますか。 上記のフィードバックを試しましたが、混乱しました...

私にとっての解決策は、.babelrcファイルに「env」プリセットを追加することでした。
{{
"presets"：["env"、 "es2016"、 "stage-0"、 "react"]
}

このリンク情報を使用して私の問題を解決しました
https://jestjs.io/docs/en/webpack.html

@negarinehあなたのリンクは機能しません

@haywirezが提供するtransformIgnorePatternsソリューションを使用すると、

SyntaxError: Unexpected token import

エラーに

TypeError: Cannot read property 'DocumentDir' of undefined

エラー。 つまり、パッケージ（rn-fetch-blob）は未定義になりました。

編集：

実際、 transformIgnorePatterns: [],をjest.config.js追加するだけで、SyntaxErrorがTypeErrorに変更されます。

@schumannd申し訳ありませんが、間違えました。リンクからページにリダイレクトされています。 リンクで提供されている構成で「jest.config.js」を設定すると、機能するはずです。
エラーが.cssファイルのインポートに関するものである場合、リンクに例のようなモックファイルを追加するか、この構成で「identity-obj-proxy」をインストールするだけで機能するはずです。

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

jest.config.js（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" } } }

また、これはプロジェクトのルートディレクトリにある私の.babelrcファイルです（test.config.jsもルートにある必要があります）：

まず、babel install "babel-jest"と "regenerator-runtime"を使用するには：

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

次に、この構成を.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" ] } } }

お役に立てれば。
https://jestjs.io/docs/en/webpack.html

私の場合、次の.babelrc追加すると機能します

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

次に、 NODE_ENV=test jestを使用してテストを実行します

これは一部の人々にのみ役立ちます。

私の問題は、jestがJSファイルを解析できないことが原因でした。 代わりにrequire使用しました。

彼ら。 私はbabelrcファイルを持っていないのでこれらの解決策はどれも機能しません... babel.config.jsだけです。 babel.config.jsでどのように修正しますか？ ありがとう

babel構成と、他の検索からのいくつかの追加オプション（ esmオプションなど）について、上記の説明から多くのことを試しましたが、何も機能しませんでした。 importキーワードは、引き続きjestからエラーを出しました。 es6インポートを使用してモジュールをテストするのが非常に難しいのは悲しいことです。

最後に、これは私のために働いたものです： ts-jest

現在、コード内でタイプスクリプトを使用していませんが、 ts-jestすべて同じように使用しています（タイプスクリプトは内部的にインポートやその他すべてをサポートしているため）。 これは、jestにjavascriptコードを正しく理解させるためだけのものです。

次の手順に従いました。
npm i -D jest typescript ts-jest @types/jest
jest.config.jsファイル内：
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jestは、typescriptがjsファイルのコンパイルを許可しないことについて不平を言うかもしれません。 以下のオプションを使用してtsconfig.jsonファイルを追加します。
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
babel関連するすべての構成とファイルを削除しました。 npm構成は次のようになります。
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
これが輸入に関して同様の問題に直面している人に役立つことを願っています。

JSインポートを使用して動作するセットアップを備えたベアボーンリポジトリを持っている人はいますか？

JSインポートを使用して動作するセットアップを備えたベアボーンリポジトリを持っている人はいますか？

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

元の議論とは無関係である可能性が高い同様の問題を検索しているときにこのページを見つけた人として。 私の問題は、 https： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Importsで説明されている関数のような動的インポートを使用したことが原因https：//github.com/airbnb/babel-plugin-dynamic-import-nodeで入手可能なこの機能のbabelプラグインを追加し、それに応じて.babelrcを変更することで解決されました。

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

オプション：{ module：false }を削除するだけで、機能します

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

jest configにtransformIgnorePatterns: []を追加し、babelrcにtransform-es2015-modules-commonjsを追加すると、問題が解決しました。
冗談：^ 23.1.0、
バベル：6.26.3

@ngmgitですが、これはすべてのnode_modulesをトランスパイルすることを意味しますが、これはあまり最適ではありません...

私の場合、
.babelrcは機能しませんが、 .babelrc同じ設定をbabel.config.js移動することで問題を解決しました。

お役に立てば幸いです。

ここにあるすべてのものは私にはうまくいきません。 ReactアプリケーションをテストするためのFacebookの公式テストライブラリが設定が難しいレベルだとは信じられません。私は8年以上の経験を持つ開発者であり、多くの問題や質問を乗り越えて成功せずに1日5時間を過ごしました。スタックオーバーフロー時。

jest + react-testing-libraryで動作するようにreactアプリケーションを構成できません

これは、jestが処理できない新しい構文エラーを毎回私に叫んで

私は本当にあきらめたことで心から終わりました、私はもうそれにもっと時間を費やしていません、私はおそらくプロジェクトにこのライブラリを追加することをキャンセルするでしょう。

真剣に、jest + react-testing-libraryを使用してreactアプリケーションをテストしたい人のためのデフォルト設定がないのを見るのは非常に奇妙です。

多くのSO回答とgithubの問題で何時間も試行錯誤した後、 @ cpojerの回答は私のために働きました！ 🙏

私を助けたいくつかの追加のコンテキストで最新かつ最高のもので更新されました：

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

依存関係：

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest （タイプスクリプト用）

この問題は、プロジェクトのルートディレクトリでjestを実行していない場合にも発生する可能性があります...

react-nativeまたはjest-expoプリセットを使用していて、プロジェクトに.jsファイルがある場合は、jest構成で一致するようにtransformを設定する必要があります。
https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer--pathtotransformer-objectの式を使用しましたが、機能しました。

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

pnpmサポート

pnpmユーザーのためにここにメモを残したいと思います。

次の例は、pnpmパスが異なるため、pnpmユーザーには機能しません。 上記の正規表現は、フラット化されたnode_modules dirでのみ機能します。

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

参照： https ：

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

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

修理

.*追加して、最後の発生に対して負の先読みを使用します。

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