nuxt-svg-loaderとJestを共存させる 💯

www.npmjs.com

Nuxt.jsでSVGをいい感じに使いたいときはnuxt-svg-loaderを使うと便利です。

<template>
  <div>
    <icon />
  </div>
</template>

<script lang="ts">
  import Icon from '~/assets/svg/icon.svg';

  @Component({
    components: {
      Icon
    }
  })
  export default class Button extends Vue {}
</script>

こんな感じで、SVGをコンポーネントのようにimportしてつかえるようになります。非常に便利です。

しかし、SVGをimoprtしたファイルを、Jestをつかってテストしようとすると、

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

というエラーがでます。どうやらSVGのパースがうまくいかないようです。

これをどうにかするために、jest-svg-transformer を試してみたのですが、

Cannot find module 'react' from 'icon.svg'

というエラーが。

reactが見つからない！とのことなので、

npm install --save-dev react

と、reactを入れてみると、エラーが消えて、無事にテストが通るようになりました！ 

Vue.js（Nuxt.js）で開発しているプロジェクトに対し、テストのためだけにReactを導入しなければならないのは釈然としないのですが、この方法で乗り切りました。

解決手順

❶ jest-svg-transformerを導入

npm install --save-dev  jest-svg-transformer

❷ reactを導入

npm install --save-dev react

❸ jest.config.js で transform に svg を追加

module.exports = {
 transform: {
   '^.+\\.svg$': 'jest-svg-transformer'
 }
}

とりあえず、これでエラーが消えて動くようになりました。