Webpackを模倣してJestを設定してルートを解決し、エイリアスを解決します

Question

Webpack & Jestを使用してプロジェクトを設定しています。現時点では、Webpack解決構成ではJestテストで問題が発生します。私のWebPACKの設定では、私は次のオプションが設定されている：src/assets/unknown.svg（私のプロジェクトのルートからの相対）

import UnknownImg from 'assets/unknown'; 

以上が実際に住んでいる：

resolve: { 
    root: [__dirname + "/src/" ], 
    extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.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と同じように動作させる方法はありますか？

Answer 1

解決策は公式のjestドキュメントで提供されています。 Webpack Tutorialを参照してください。要するに

、package.jsonであなたの冗談の設定にmodulePathsオプションを追加します。

"jest": { 
    "modulePaths": ["src"], 
    ... 
} 

Answer 2

良い夜の休息の後、私はこれをもう一度見て、それがJest構成ではなくノードであることを認識しました。 WebPACKの中resolve.rootの設定の動作を模倣するための最良の方法はjestを実行しているときに、同じディレクトリに環境変数NODE_PATHを設定することです：

NODE_PATH=src jest 

本当にそれが解決し、複数のディレクトリの問題を解決していないこと私の問題。この記事は私が解決策を少し良く理解するのを助けましたhttps://gist.github.com/branneman/8048520。

Answer 3

Jestpackは、Jestを実行する前にWebpackでテストファイルをビルドすることでこの問題を解決することを目指しています。つまり、Webpack設定の特別なモジュール解決ルールやローダーは、本番ビルドとまったく同じ方法で動作します。

Answer 4

webpackのようにパスを解決するために、mimic-webpackにwebpackの設定とノードのrequireへのフックを書きました。私は冗談でテストしていませんが、ノードで動作しているシンプルなローダーをサポートするスペックランナーでも動作します。

Answer 5

あなたが成熟した（数日間は思えない冗談20+ resolver optionを使用してjest-webpack-resolver

このパッケージでそれをプラグインすることができます私のために仕事をしています。また、現在のところ、Jest設定を個別のjest.config.jsファイルにするか、CLI経由で提供する必要があります（package.jsonはサポートしていません）。