web-dev-qa-db-ja.com

Webパック解決ルートを模倣してエイリアスを解決するようにJestを構成する

私はWebpack＆Jestでプロジェクトをセットアップする作業をしています。現時点では、Webpackの解決構成により、Jestテストが複雑になります。私のwebpack構成では、次のオプションを設定しています。

  resolve: {
    root: [__dirname + "/src/" ],
    extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.svg']
  }

これにより、以下のアセットとモジュールが必要になります。

import UnknownImg from 'assets/unknown';

上記は実際に生きています（私のプロジェクトルートに対して）src/assets/unknown.svg。

ただし、上記のような行を含むファイルのテストを実行すると、必要なモジュール/アセットへのパスを解決するときにエラーが発生します。

Error: /Users/byronsm/dev/nerve-center/src/components/organisms/system_status.jsx: Cannot find module 'assets/unknown' from '/Users/byronsm/dev/nerve-center/src/components/organisms'

この場合、インポートされたモジュールパスの相対ルックアップを実行しているようです。 JestをWebpackと同じように動作させる方法はありますか？

webpackjestjs
17
Krustal

ソリューションは、公式のjest docsで提供されています。 Webpackチュートリアル を参照してください。

簡単に言うと、modulePathsオプションをjest設定inpackage.jsonに追加します。

"jest": {
    "modulePaths": ["src"], 
    ...
}
31
Rob Squires

Jest 20+ resolver option を使用して jest-webpack-resolver でプラグインできます

このパッケージは成熟したようには見えませんが（数日前）、私にとってはうまくいきます。また、現時点では、Jest構成を別のjest.config.jsファイルに含めるか、CLI経由で提供する必要があります（package.jsonはサポートされていません）。

4
kompot

Jestpack は、Jestで実行する前にWebpackでテストファイルを作成することにより、この問題を解決することを目的としています。つまり、Webpack構成内の特別なモジュール解決ルールまたはローダーは、本番ビルドとまったく同じように機能します。

2
riscarrott

おやすみの休憩の後、私は再びこれを見て、それがJest構成ではなくノードであることに気付きました。 webpackのresolve.root構成の動作を模倣する最良の方法は、jestの実行時に環境変数NODE_PATHを同じディレクトリに設定することです。

NODE_PATH=src jest

それは実際には私の問題を解決した複数のディレクトリの問題を解決しません。この記事は、ソリューションを少しよく理解するのに役立ちました https://Gist.github.com/branneman/804852 。

2
Krustal

私が書いた - mimic-webpack webpack構成を取得し、webpackのようにパスを解決するためにノードのrequireにフックします。私はjestでテストしていませんが、nodeで実行され、単純なローダーもサポートするスペックランナーで動作するはずです。

2
Thomas Hallock

Jestバージョン23.6.0：

この行をjest.config.jsに追加します

moduleDirectories: ["node_modules", "src"],

またはpackage.json

"jest": {
    "moduleDirectories": ["node_modules", "src"], 
    ...
}
1
Said Kholov