JestのmoduleNameMapperで画像のfile mockができなくてハマった

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  moduleNameMapper: pathsToModuleNameMapper(
    compilerOptions.paths,
    { prefix: '<rootDir>/' }
  )
}

tsconfig.jsonのcompilerOptionsにpaths設定をしているので、pathsToModuleNameMapperを使ってみたいな感じで書いていた。

svgファイルをimportするコードがあったので https://jestjs.io/ja/docs/webpack を参考にfileMockさせようと思いこんな感じで書いた。

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  moduleNameMapper: pathsToModuleNameMapper(
    {
      "\\\\.(jpg|jpeg|png|gif|svg)$": ["./src/tests/mocks/fileMock.js"],
      ...compilerOptions.paths,
    },
    { prefix: '<rootDir>/' }
  )
}
module.exports = 'test-file-stub';

するといっこうにfileMockが効かない。。。2時間くらい格闘したけど、結論pathsToModuleNameMapperの中にいれていたのが間違いで、外に設定すれば動いた。

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  moduleNameMapper: {
    "\\\\.(jpg|jpeg|png|gif|svg)$": ["<rootDir>/src/tests/mocks/fileMock.js"],
    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
  },
}

pathsToModuleNameMapperのソースコードを見てみるといろんなエスケープ処理が入っていて、tsconfig.jsonのcompilerOptions.paths用に作られていた。（そりゃそうだ）

pathsToModuleNameMapperにいれると↓みたいになっててそりゃ一致しないよねってことでした。

{
  '^\\\\\\\\\\\\.\\\\(jpg\\\\|jpeg\\\\|png\\\\|gif\\\\|svg\\\\)\\\\$$': '<rootDir>/./src/tests/mocks/fileMock.js',
}