web-dev-qa-db-ja.com

SyntaxError：Jestによる予期しないトークンのインポート

私はreact-nativeプロジェクトでredux-persistを使用してjestスナップショットテストをセットアップしようとしています。私のテストコードは次のようになっているので、es2015のインポートの問題はないと思います。

import React from "react"


import "react-native"



// Note: test renderer must be required after react-native.


import renderer from "react-test-renderer"



import App from "../App"



it("renders correctly", () => {
const app = renderer.create(<App />).toJSON()
expect(app).toMatchSnapshot()


})

redux-persistを追加する前に、これとまったく同じテストを実行しましたが、機能していました。

Jestによってスローされたエラー：

●テストスイートの実行に失敗しました

/Users/a_050313/Documents/dev/scheduling/node_modules/redux-persist/es/integration/react.js:9
import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
^^^^^^

SyntaxError: Unexpected token import

  1 | import React, { Component } from "react"
  2 | import { Provider } from "react-redux"
> 3 | import { PersistGate } from "redux-persist/es/integration/react"
  4 | 
  5 | import "./__debug__/ReactotronConfig" // Run Reactron Tools config
  6 | 

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
  at Object.<anonymous> (App.js:3:13)
  at Object.<anonymous> (__tests__/App.js:7:10)`
reactjsreact-nativejestredux-persist
4
Ahmad

エラーはes2015インポートに関連していましたが、冗談で終わりです。デフォルトでは、jestはプロジェクトコードとreact-nativeコードのみをトランスパイルします。したがって、まだトランスパイルされていない追加されたライブラリは、冗談でエラーになります。

（jestドキュメントに記載されているように）

デフォルトでは、jest-react-nativeプリセットはプロジェクト自体のソースファイルとreact-nativeのみを処理します

解決策 公式ドキュメントで提供されているのは少しハッキーのようですが、私が見つけたのはそれだけです：

package.jsonjest: { }セクションまたはjest.config.jsファイルに以下を追加します。

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

ここで、ビットredux-persistは問題を解決するものです。他のライブラリに問題がある場合は、名前を追加してください。私のリストは次のようになります。

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
        "node_modules/(?!(react-native|my-project|redux-persist|react-native-linear-gradient|react-native-vector-icons|react-navigation)/)"
    ]
}

PersistGateをからインポートする場合のredux-persistに関する追加の注意

import { PersistGate } from "redux-persist/lib/integration/react"

代わりに

import { PersistGate } from "redux-persist/es/integration/react"

（ 参照 ）

コンパイルされたバージョンを取得しますが、他のライブラリの場合は、上記の解決策を取得します。

15
Ahmad