TypeScript + Jest で画像を import する

概要

TypeScript + Jest で画像を単純に import するのが割と難しかったのでメモっておく。

import を通す

普通に画像を import すると VSCode さんに怒られる。

型定義ファイルが必要みたいなので、下記ファイルを作る。

declare module '*.jpg';
declare module '*.jpeg';
declare module '*.png';

加えて、上記を読みに行ってくれるように tsconfig を変更する。

...
"typeRoots": ["./node_modules/@types", "types"] // types を追加
...

これで、VSCode さんに怒られなくなった。

実行エラーに対応する

よし、と思ってテストを実行すると、エラーになる。画像を JS ファイルとして読み込んでいるらしい。

  ● Test suite failed to run

    /Users/<USER_NAME>/<PATH>/test/images/sample.jpeg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){����
                                                                                             

    SyntaxError: Invalid or unexpected token

jest.config で画像の拡張子を持つファイルを読み込んだ場合はモックするように指定する。

...
  "moduleNameMapper": {
    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
  }
...

モックの内容はこれで良いらしい。

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

参考

ありがとうございました。超絶助かりました。

qiita.com

qiita.com

余談

単純に画像を読み込めれば良いのであれば、fs.readFileSync(path) でOK。