web-dev-qa-db-ja.com

create-react-app＆jest — SyntaxError：予期しないトークンのインポート

注：src/nod_modulesフォルダー内のすべてのコードをsrcフォルダーに直接移動し、この短いスレッドのようにsrc/node_modulesを削除して、これを修正しました： https：// github.com/facebook/create-react-app/issues/4241

Create-react-appを使用していますが、Jestを実行できません。

Reactコンポーネントのいずれかをテストファイルにインポートしようとすると、yarn testを実行するとエラーが発生します。

Test suite failed to run

.../src/node_modules/common/ErrorMessage.js:1
({"Object.<anonymous>":function(
module,exports,require,__dirname,__filename,global,jest)
{import React from 'react'
^^^^^^

SyntaxError: Unexpected token import

これは私のテストファイルは次のようになります：

// test.test.js

// attempting to import
import ErrorMessage from '../node_modules/common/ErrorMessage.js'

// dummy test
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3)
})

ただし、srcファイルのルートにいて、index.jsをインポートしている場合、エラーはスローされません。その時点で、index.jsがインポートする最初のファイルでエラーがスローされます。例えば：

test.test.js

import index from './index'

index.js

import React from 'react'
import { render } from 'react-dom'
import './style/index.css'
import LoginContainer from './node_modules/user/LoginContainer'
import NewUser from './node_modules/user/NewUser'
// etc.

端末出力

 FAIL  src/test.test.js
  ● Test suite failed to run

    /Users/hannahmccain/Desktop/DEV/expense-report/fullstack-expense-report/client/src/node_modules/user/LoginContainer.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/index.js:11:164)
      at Object.<anonymous> (src/test.test.js:3:14)

Jestのコンテキストでは、Babelはsrc/node_modules内のファイルを適切にコンパイルできないようです。それを修正する方法について私は途方に暮れています！どんな洞察もいただければ幸いです。

ちなみに、ジェストは標準でcreate-react-appを使用することになっており、イジェクトしたくありません。排出しないと、package.jsonのJest設定を更新するなど、他の場所で推奨されている変更を加えることができません。

reactjsjestjsbabeljscreate-react-app
9
haiba

node_modules/user/LoginContainer.js内のコードは、それらのインポートステートメントがまだ含まれているため、製品リリース（ベイブ化バージョン）ではありません。

Create-react-appで事前構成されたJestは、node_modules内のコードが事前にベイブ化されると想定してテストを実行する前に、node_modules内のすべてをbabel変換から除外します。

そして、node_modules内のモジュールはバベル化されていないため、jestはimportステートメントに遭遇するとすぐにエラーをスローします。

ソリューション

1。node_moduleのビルドスクリプトを使用している必要があります。モジュールの本番リリースをnode_modules内に配置してみてください。これでうまくいきますが、（私の経験によれば）さらに問題が発生します。

2。イジェクトせずにjestとその依存関係の明示的な構成を開始します。基本的に、テストスクリプトをjest --env=jsdomに変更します。 jest、react-dom、babel-transforms- *を明示的にインストールし、package.json内のjest設定を使用して設定する必要があります。

ここでは、2つの主要な構成オプションであるtransformIgnorePatternsとtransformに焦点を当てる必要があります。

つまり、すべてを変換し、すでに変換されているものはすべて無視します。

詳細については、Jest configuration セクションを参照してください。

2
Himanshu Singh

アプリケーションに.bablercファイルを追加してみてください

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

テストケースの実行中にjestがプリセットを使用するように、使用するプリセットを指定する必要があります。 Jestはwebpackを認識していないため、このファイルでプリセットを指定する必要があります。

0
Karthikayan Selvaraj