Jestを使ってCSSをimportしているコンポーネントをテストする 💯

f:id:kimizuka:20200818113011p:plain

Nuxt.jsにて、

import '~/assets/css/common.scss';

という感じで、scssをインポートしているComponentをテストしようとすると、

SyntaxError: Unexpected identifier

と、SCSSがパースできずJestがコケて困ってました。

解決策を探してみたところ、 vue-jest の issue で同様の悩みを発見。

cssや画像、フォントなどのファイルは jest-transform-stub でテストする、つまり本家のテストの対象外にしてしまうのがセオリーのようです。

yarn add -D jest-transform-stub

※ yarnを使っている場合

module.exports = {
  transform: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
  }
};

これでOKです。

実際、CSSとSCSSだけなら、

module.exports = {
  transform: {
    '^.+\\.(css|scss)$': 'jest-transform-stub'
  }
};

で充分なのですが、今後のためにたくさん設定しておきました。

みかづきブログ・カスタム