web-dev-qa-db-ja.com

ジェスト、予期しないトークンのインポート

私は新しい反応プロジェクトを開始し、テストプラットフォームとしてJestを使用したいと思います。ドキュメント、ブログ、stackoverflowのような他の多くのリソースにもかかわらず、私は常に「予期しないトークンのインポート」エラーを抱えている可能性があります。どんな助けでも歓迎します。

私のJest conf（package.json内）。私のpackage.jsonには、babel-jest、babel-preset-es2015、babel-preset-reactなどの依存関係があります。

 "jest": {
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }

私の.babelrc conf：

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    ["transform-runtime"]
  ],
  "env": {
      "test": {
        "presets": ["es2015", "react"]
      }
  } 
}

私のスペックファイル：

import React from 'react';
import Radio from 'components/ui/radio';
...

そしてcomponents/ui/radio（最初の行でインポートエラーが発生します）：

import Container from './container.jsx';
...

私のwebpackには、libという名前の2つのエイリアスとコンポーネントがあります（jestではmoduleNameMapperとして定義）。

...
resolve: {
   mainFiles: ['index', 'main'],
   extensions: ['.js', '.jsx'],
   alias: {
     lib: helpers.getPath('src/lib/'),
     components: helpers.getPath('src/components/'),
   },
   modules: [
     helpers.getPath('src'),
     helpers.getPath('node_modules'),
   ],
}, 
...
reactjsjestjsbabel-jest
12
Jerome

私は非常によく似た問題を抱えていましたが、jestを実行するときに--no-cacheを使用するだけで最後に解決しました。

私はまた、package.jsonの依存関係にbabel-jest、babel-preset-es2015、babel-preset-reactなどの依存関係がありました。

jest --no-cache
4
Pere Pages

新しいJestバージョンに更新した後にこの問題が発生した場合は、Jestの内部キャッシュをクリアしてみてください。

jest --clearCache
0
Ayan

通常提案されているすべてを実行し、何も機能しないようだと仮定します。ファイル拡張子を.jsxから.jsに変更します。私のプロジェクトの一部のライブラリ/バージョンは.jsxで問題ありませんでしたが、他は問題があり、問題の原因を突き止めるのは悪夢でした。

JSXが追加されているのか、JSXの最後の部分が削除されているのかを確認するために、チームが操作するすべてのファイルに対するすべての更新を監視し続ける必要はありません。実際には、コードが変更されるときにファイルに追加したり、ファイルから削除したりするのが一般的です。少しコードを変更しただけで、手動で「このファイルの名前を今すぐ変更する必要がある」ということを思い出させるか、リンターに怒鳴られるかのいずれかで、多くの時間を費やすことになります。そして、それはfoo.jsとfoo.jsxの両方が同時に存在する可能性を開きます-次に何が起こりますか？ -賢い同僚

それでも強調表示してオートコンプリートが必要な場合は、IDEでJSXファイルが得られるので、プロジェクト固有のワークスペースを変更できるはずです。VSCodeの場合、次のように簡単です。

"files.associations": {
    "*.js": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
}
0
DILP