Jestスナップショットを使用しているときに私の画像ファイル名/パスを持っています。

Question

新しいプロジェクトでJestをたくさん使い始めましたが、今はSnapshot Jestの機能を使用しています。

簡単に言えば、コンポーネントは文字列でレンダリングされ、ディスク上に保存されます（スナップショットとしてリポジトリにチェックインすることができます）。後でテストを実行すると、スナップショットは変更されませんでした。

冗談でそれに対処するための通常の方法は、それらを模擬し、ランダムな文字列を返すために、それらをインポートするためのハンドラを指定することです：

私の問題は、インポート画像で行うことです。 そのようにすれば、実際に画像をロードする必要はありません。ノーではimport img from './image.pngの処理方法がわからないため、例外が発生します.Webpackだけがローダーを経由します。冗談構成で

、あなたがそのようなものだろう：あなたが見ることができるように

"jest": { 
    "moduleNameMapper": { 
     "^.+\\.(png|jpg|jpeg|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/__mocks__/fileMock.js", 
     "^.+\\.(css|less|scss)$": "identity-obj-proxy" 
    }, 
    [...] 
} 

を、画像（PNG、JPEGなど）はすべて、単純であるfileMockを使用して "解決" されていますこの：

module.exports = 'test-file-stub'; 

ここでの私の問題は、モックがあまりにも遠く少し行くということです。

012：それは常にフラグがどのように見えるレンダリングコンポーネントのための私のスナップショットを意味し、同じ文字列を返します私が望む何

exports[`components - Flag should match the snapshot 1`] = ` 
<img 
    alt="Flag" 
    className="image" 
    src="test-file-stub" /> 
`; 

（入力が<Flag country="fr" />のようなものだった）

は、次のようなレンダリングされる私のスナップショットです：

exports[`components - Flag should match the snapshot 1`] = ` 
<img 
    alt="Flag" 
    className="image" 
    src="/some/path/fr.png" /> 
`; 

私はこれが直面しているだけだとは思いませんしかし、一方で私はこれを解決する任意のリソースを見つけることができませんでした。

ありがとうございます！

Answer 1

moduleNameMapperに頼る代わりに、transformというカスタムを指定して、ソースではなくイメージパスを返すことができます。実際の例はMocking CSS Modulesの下にあり、より簡単にするために下に貼り付けてあります。

// fileTransformer.js 
const path = require('path'); 

module.exports = { 
    process(src, filename, config, options) { 
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; 
    }, 
}; 

と

// package.json (for custom transformers and CSS Modules) 
{ 
    "jest": { 
    "moduleNameMapper": { 
     "\\.(css|less)$": "identity-obj-proxy" 
    }, 
    "transform": { 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js" 
    } 
    } 
}