【Vue】JestでSVGファイルをコンポーネントとしてテストする方法

はじめに

Jestは最近巷で人気なフロントエンドのテストフレームワークです。

今回は、SVGファイルを含んだVueファイルをJestを利用してテストするために、少し四苦八苦したので共有しようと思い記事にしました！

vue-jestでのsvgファイルコンポーネントのテストについて

Jestを用いたVueコンポーネントのテストを行う際には、vue-jestを利用しますが、
vue-jestはSVGファイルをコンポーネントとして利用する方法をデフォルトで提供していません。

そのため、ライブラリを探すと、
jest-transform-stubとjest-svg-transformerとsvg-react-transformerの3つがあるようです。

Vueのプロジェクトなのでreactに依存するのはreact必要だしちょっと..と思いつつ
jest-svg-transformerを早速利用しようとしました。
ですが、こちらもなぜかreactに依存しているみたいでした。。
jest-transform-stubはSVGファイルをコンポーネントとして用いる場合には、使えそうにはありませんでした。

え？？どうしようと思いながらたどり着いたのが以下のissueです。
https://github.com/visualfanatic/vue-svg-loader/issues/38

vue-svg-loaderのissueですが、なぜか丁寧にvue-jestにsvgファイルを読み込む方法を記述してくれてます。

デフォルトで対応してよ...。

以下に実装例を記述します。

svgTransFormer.jsはJestがSVGファイルコンポーネントを読み込んだ際にテストを行うための設定ファイルです。

svgTransFormer.js

const vueJest = require('vue-jest/lib/template-compiler');

module.exports = {
  process(content) {
    const { render } = vueJest({
      content,
      attrs: {
        functional: false,
      },
    });

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

Jestの設定は以下の通りです。

.json

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "vue",
      "svg"
    ],
    "transform": {
      "^.*\\.vue$": "vue-jest",
      "^.*\\.svg$": "./svgTransFormer.js",
    },
    "testMatch": [
      "<rootDir>/**/__tests__/*.(spec|test).js?(x)"
    ]
}

おわりに

今回は以上です。
間違いや何か質問などありましたらコメントお願いします！