cssをimportしたコンポーネントのjestを実行する

Vue.jsのコンポーネントで、cssをimportしているとjestで転けてしまったので、jest.config.jsに設定を入れて解消します。

エラーの内容はこのような感じです。

Test suite failed to run

Jest encounterd an unexpecter token

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

いろいろと調べたり試したりしたのですが、最終的に以下の方法でうまくいきました。

jest-css-modulesをインストールします。

npm install -D jest-css-modules

ルートの直下にjest.config.jsを作成し、以下を記述します。

module.exports = {
  moduleNameMapper: {
    "¥¥.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
  }
}

今回使ったのはjest-css-modulesですが、たくさんこれ系のモジュールはいくつかあるみたいなので、自分のプロジェクトに合ったものを使うと良いと思います。

終わり！