Jestでnuxt-svg-loaderを使ったVueテンプレートのテスト実行時にSVGファイルをパースする方法

結論

プロジェクト直下に SVGファイルをテスト実行時にパースするファイル (svgTransform.js) を定義して、Jestでそれを読み込むようにする

github.com

各パッケージのバージョン

• nuxt@2.15.8
• vue@2.6.14
• @vue/test-utils@1.3.3
• @vue/vue2-jest@29.2.0
• jest@29.3.1
• ts-jest@29.0.3
• nuxt-svg-loader@1.2.0

svgTransform.js

// NOTE: JestでSVGをパースするためのファイル
// 参考：https://github.com/damianstasik/vue-svg-loader/issues/38#issuecomment-1135337194
const VueTemplateCompiler = require("vue-template-compiler");

module.exports.process = (svgSource, _) => {
  const result = VueTemplateCompiler.compileToFunctions(`${svgSource}`);

  return {
    code: `module.exports = { render: ${result.render} }`,
  };
};

jest.config.js

module.exports = {
  // 中略
  transform: {
    // 中略
    "^.+\\.svg$": "<rootDir>/svgTransform.js",
  },
};