🦔

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

2020/09/24に公開

JavaScript

Vue.js

Jest

tech

はじめに

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

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

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

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

そのため、ライブラリを探すと、
jest-transform-stub: https://www.npmjs.com/package/jest-transform-stub
jest-svg-transformer: https://www.npmjs.com/package/jest-svg-transformer
svg-react-transformer: https://github.com/mapbox/svg-react-transformer
の3つがあるようです。

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

え？？どうしようと思いながらたどり着いたのが以下のissueです。

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

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

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

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

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の設定は以下の通りです。

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

おわりに

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

はじめに

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

おわりに

Discussion