JESTで予期しないトークンエラーを修正しました

私は最近、ストレートになるために1日のより良い部分を取った厄介な問題に走った.それで、私はそれが他の誰かを助けるという望みでここに私の解決を置くつもりです.

問題

私は、現代のJavascriptを使用するNPMパッケージを作成しました.「現代」によって、私はES 2015に準拠したJavaScript(それは正直に私にすべてを感じません...私に現代的です、しかし、NPMとJestはCommonJsの2013年の栄光年で動けなくなっているようです.私は古いskoolで私のパッケージを書くことを拒否するrequire() and module.export そして、それらの他のすべての老化規則.それは2021、ダムです.バベルは、若干の最先端技術でありません.私は私のアプリケーションのコードの残りの部分と一致する方法で私のパッケージを書くことができるはずです.
私はこのパッケージを公開/配布消費のために書いていたので、良い単位テストをすることが重要であると感じました.そして、「反応する人」として、私は冗談にデフォルトで傾向があります.しかし、通常、私がJestを使うとき、私自身の自己保存された実行環境で私自身の小さいバッチコードをテストしています.そして、私がそれをするとき、ジェストはちょうどうまくいきます.
しかし、今回は自分のNPMパッケージをテストしています.これを別の用語にするために、私はjestを使ってパッケージをテストします.閉じるこの動画はお気に入りから削除されています.つのビット.
「問題」は、JestがCommonJSスタイルコードを処理したいだけです.それで、Jestテストが走るために、それは最初にBabelによって蒸される必要があります.正しく転送されない場合、以下のようなエラーが表示されます.

Jest encountered an unexpected token

セットアップによっては、コードファイルの最初の行にエラーが表示されます.また、コードがJSXを処理しようとしたときに表示されます.私は1行目で見ました.なぜなら、1行目はほとんど常にimport ステートメント-いいえimport CommonJSのステートメント.

頭痛

Googleが「冗談の予想外のトークン」ならば、これが本当に厄介な問題であるといういくつかの徴候があります:

この問題に関しては、多くのスレッドがあります.

スレッドは数年にわたって-問題は繰り返し人々のためにトリミング続けている意味.

スレッドの多くは長いです.これは、これらの問題の一つではない迅速な答えは、元のポスターの問題を解決します.

それはあなたの典型的なNOOBの問題ではないこれらのスレッドを読んでから明らかです.彼らのアプローチを投稿する人々の何人かは、JEST/反応/Babel/TypesScript/etcのための構成のすべての面でかなり知識があるようです.

普遍的な答えはないようだ.スレッドは1つの人のようなものを投稿すると、“ここではどのように私はそれを修正しています.”いくつかの他の人々は、彼らは全く同じことを言った後.そして、それは彼らの問題を解決しませんでした.

提案された回答はすべて全く環境に特有のようです.時々使用する必要がありますtransformIgnorePatters - しかし、他のビルドでは、何もしない.Windows上での作業?あなたはおそらく必要でしょうcross-env あなたのソリューションのどこか.またはwin-node-env . またはenv-cmd . またはwindows-environment . あなたが反応しているならば、あなたは多分Vueより異なる解決を必要とするでしょう.そして、あなたがtypescriptを使っているならば、それらの解決の両方は異なるかもしれません.適切に設定する必要があるでしょう.babelrc ファイル-しかし、多分あなたはそれを変更する必要がありますbabel.config.json ?

FWW、私もここで右側にいくつかの記事を発見した解決策を提案した-それは私のために何もしなかった.
私が解決する前に、私はちょうどそれを言うことを得なければならない.あなたがこれを見るとき、そうでなければ彼らが何をしているかについてわかっているようであるこの長い人々のために何かを奮闘しています.何か本当にこのプロセスで最適化する必要があります.

免責事項

あなたが既に考え出していないならば、この全体のBabel/Webpack/Jest/反応構成物は、時々私を混乱させます.はい、これは何十年も非常に重いこのようなことをやっている男から来ている.一部の人々は本当に問題のこれらのタイプを解決する上で降りる-しかし、彼らは私を悩ます.私は正直に私は正直にそれについては気にしない問題とのレスリングを多くの時間をsoooooを費やして終了し、それはちょうどコーディングから私を維持している.
それを念頭に置いて、私は絶対にすべての設定-またはそれらのほとんどのためにこれを解決する方法を知らない.私は、ちょうど私が何を最終的に働かせたかについてわかっています.それで、この記事は、私がここ数日で循環した他のすべてとしてあなたに役に立たないかもしれません.しかし、うまくいけばそれは誰か少しの時間を節約します.
既に述べたように、これらの解決策は非常に環境に特有のようです.それで、あなたはおそらく私がノードでWindowsv14.2.0 , 国立天文台v6.14.4 , アンド冗談v26.6.3 ローカルにインストール.

スタンドアロンJSプロジェクト

パッケージ。JSON（略称）

{
  "name": "@toolz/allow",
  "main": "src/allow.js",
  "scripts": {
    "test": "jest --transformIgnorePatterns \"node_modules/(?!@toolz/allow)/\" --env=jsdom"
  },
  "type": "module",
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.1",
    "@babel/node": "^7.10.5",
    "@babel/plugin-transform-modules-commonjs": "^7.13.0",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.12.13",
    "babel-jest": "^26.6.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-jest": "^26.6.2",
    "jest": "^26.6.3",
    "jest-cli": "^26.6.3",
  },
  "dependencies": {
    "@toolz/is-a-regular-object": "^1.0.1"
  }
}

特に注意を払うscripts: test ノード.このプロジェクトの名前@toolz/allow ) が括弧内です.また、これを設定するまで、これは動作しませんでしたenv 値jsdom . 私は、私がそのもののすべてを必要とすると本当に思いませんdevDependencies ノード.でも知ってる?それは今動作します-ので、私はtouchinではない.

バベル.設定。JSON

{
  "presets": [
    "@babel/preset-env"
  ]
}

注意:これは.babelrc . この特定の設定では、ファイルを必要としているようですbabel.config.json .
これらの設定を使用すると、現在実行できますnpm test そして、それは適切に私のテストを実行しますimport of @toolz/is-a-regular-object .

解決けんか2 -反応プロジェクト（作成反応アプリ）

パッケージ。JSON（略称）

{
  "name": "@toolz/allow-react",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.2",
    "@toolz/allow": "^1.0.1",
    "@toolz/is-a-regular-object-react": "^1.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@toolz/allow-react)/\" --env=jsdom"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.12.13",
    "babel-jest": "^26.6.3"
  }
}

と一致するcreate-react-app アプリケーションがない.babelrc or babel.config.json このプロジェクトのファイル.私が必要とするすべては、ちょうどここにありますpackage.json . これで、すべてのテストを実行しますnpm test , それらを含むimport 他のES 2015構文プロジェクトから.
私が痛快にクリアしようとしたので、私はこれがあなたのプロジェクトで働くかどうか全くわからないです.しかし、多分これらの構成は誰かを助けるでしょうか?