web-dev-qa-db-ja.com

babel-jestはモジュール内でES6を処理しません

ES6モジュールを使用するReactベースのプロジェクトにJestを設定しようとしています。ただし、ES6モジュールに問題があるようです。babel-jestを使用しており、この設定があると考えています適切に（Jestはそれを自動的に検出します）。

JestがES6インポートを使用しても問題はないようですが、インポートされたモジュールの1つ内でimportステートメントがチョークするとすぐにヒットします。インポートされたモジュールではなく、最初のテストスクリプトのみをトランスコンパイルしているようです。いろいろな設定を試してみましたが、運よくGoogleを検索してみました。インポートせずにテストを実行すると正常に機能します。

エラーは次のとおりです。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Predications from './predications';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

Configの関連ビットは次のとおりです。

jest.conf.json

{
  "testRegex": "\/test\/spec\/.*\\.js$",
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

テストスクリプト

import React from 'react';
import { mount, shallow } from 'enzyme';
import Slider from 'react-slick';
import Carousel from '../../client/components/carousel/carousel.js'; // test chokes on when I include this module

describe('carousel component', () => {
  it('is a test test case', () => {
    expect(1 + 2).toEqual(3);
  });
});

更新：

提案されたように、jest.conf.jsなしでテストを実行しようとしましたが、Jestがテストを見つけるためにtestRegexが必要です。テストをデフォルトのテストディレクトリに移動しようとしても失敗します。

テスト自体が正常に実行されていることを明確にしたいのですが、上記の例では、インポートしたモジュールの1つがES6を使用している場合、カルーセルコンポーネントをインポートしないと、インポートするとすぐにテストが正常に実行されますテストがそのファイル内のimportステートメントでチョークすること。インポートされたモジュールがトランスパイリングされていないようです。

＃2を更新

いくつかの調査の後、問題はbabelがnode_modules内でES6をトランスコンパイルしていないことであると思われます。ここでこれを示すためにサンプルリポジトリを作成しました。 https://github.com/jamiedust/babel-jest-example

サードパーティのモジュールが独自のトランスパイルを処理する必要があることを理解していますが、独自のnpmレジストリでホストされ、プロジェクト間で再利用されるいくつかのモジュールがあります。これらの場合、Webpackはトランスポートを処理します。 node_modulesをBabelによってトランスパイリングするか、これを行うためにセットアップされたwebpackを活用する方法。

ソリューション

Package.json（またはJest設定ファイル）に次の設定を追加します。

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!test-component).+\\.js$"
  ]
}
babeljsjestjses6-modules
24
jamiedust

デフォルトでは、node_modulesのコードはbabel-jestによって無視されます。Jest構成オプション transformIgnorePatterns を参照してください。また、 例のレポのPR も作成しているので、動作していることがわかります。

これは機能しますが、ESモジュールを含む多くの依存関係を持つ実際のアプリケーションでは非常に遅いことがわかりました。 「babel-jest変換依存関係」（申し訳ありませんが、 2つ以上のURLを投稿させません）。これは、Windowsではさらに時間がかかる場合があります。「空のリポジトリで10秒かかる」を参照してください。

「ユニット」テストを行う場合は、おそらくモッキングがより良い方法です。

10
Samuel Sharpe

テスト専用に、transform-es2015-modules-commonjsプラグインをbabel configファイルに追加してみてください。以下は、テスト環境でのみモジュールをトランスパイルするようにbabelに指示する構成ファイルの例です。プリセットの下に置くことができます：

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

プラグインについてはこちらで読むことができます：

https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs

次に、コマンドラインでJestテストを実行する場合、NODE_ENV = testを指定します（Jestはbabel出力をキャッシュするため、babel configに変更を加えた後、最初にコマンドに--no-cacheフラグを追加する必要がありますが、あなたがそれを残すことができること：

NODE_ENV=test jest --no-cache

この問題については、React Frontend MastersのBrian Holtによるセミナー。 https://frontendmasters.com/courses/

2
A. Cookro

私は同じ問題に直面しました（node_moduleはbabel-jestによってトランスパイルされません）、それを解決することができませんでした。

代わりに、ここで説明するように、node_moduleをモックすることで最終的に成功します https://facebook.github.io/jest/docs/manual-mocks.html

NB：___mocks___サブフォルダーでモックを設定しても機能しませんでした。そのため、jest.mock()関数の2番目のパラメーターとしてモックを渡しました。何かのようなもの ：

_    jest.mock('your_node_module', () => {})
_
1
Grégory Le Garec

別の考えられる原因。 Babelはnode_modules内の.babelrcを無視し、依存関係によって提供されるものを使用します。依存関係を制御できる場合は、それに.babelrcを追加する必要があり、babelはそれらの設定を使用します。

ただし、依存関係とプロジェクトが異なるbabelバージョンまたはモジュールを使用している場合、問題が発生する可能性があります。

1
FreakinaBox