web-dev-qa-db-ja.com

画像をインポートするとjestテストが失敗する

Reactコンポーネントでアセットをインポートする場合（例： "../../../assets/img/logo.pngからロゴをインポート））では、このようなエラーが発生します

（{"オブジェクト。"：function（module、exports、require、__ dirname、__ filename、global、jest）{�PNG
SyntaxError：ScriptTransformer._transformAndBuildScriptでの無効または予期しないトークン（node_modules/jest-runtime/build/script_transformer.js：305：17）

私の冗談の設定は

"jest": {
"testRegex": ".*\\.spec\\.js$",
"moduleFileExtensions": [
  "js",
  "jsx",
  "json"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "assets"
],
"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"verbose": true,
"bail": true
}

私は何が欠けていますか？

reactjstestingwebpackjestjs
23
Annie Alan

これをできるだけ簡単にします

画像ファイルをインポートすると、Jestは画像のバイナリコードを.jsとして解釈しようとするため、エラーが発生します。

the only way out is to mock a default response anytime jest sees an image import

これどうやってやるの？

  • まず、画像のインポートが発生するたびにモックファイルを実行するようにJestに指示します。以下のキーをpackage.jsonファイルに追加してこれを行います
"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
}

すでに"Jest"キーがある場合は、それに"moduleNameMapper"子を追加するだけです

  • 最後に、ルートにmocksフォルダを作成し、その中にfileMock.jsファイルを作成します。以下のスニペットをファイルに入力します
module.exports = ''; 

Note > if you are using es6 you can use export default ''; to avoid an Eslint flag

上記の手順が完了したら、テストを再開できます準備完了です。

注意。画像ファイルのさまざまな拡張子をmoduleNameMapperに追加して、モックできるようにしてください。

お役に立てれば幸いです。 ＃乾杯！

39
Adépòjù Olúwáségun

Jestをwebpackで使用する場合は、明示的にそのように構成する必要があります。こちらのガイドをご覧ください： http://facebook.github.io/jest/docs/en/webpack.html

1
kngroo

IOS @

moduleNameMapper: {
    "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
    "^[@./a-zA-Z0-9$_-]+\\.(png|gif)$": "RelativeImageStub"
  }
0
Bogdan Ustyak