FizzBuzz

初めて書いたアルゴリズムがFizzBuzzでした

JestでSCSSをimportしているところのテストでエラーが起きるのを解決

概要

JestでReactのテストを書いているときに、SCSSをインポートしている箇所のテストでエラーが起きていました。 それに対しての解決方法です。

環境

開発の環境は以下です。 - TypeScript - React - Redux - Jest - Enzyme - Webpack

原因

テスト環境では、インポートされたSCSSファイルを扱うことができないのが原因でした。 (tsやtsxのファイルはjest.config.jsのtransformオプションでts-jestを使って変換するというふうに設定しているので扱えます。)

上記のような設定をSCSSに対して行っていないため、エラーが出ていました。

解決策

CSSモジュール(SCSSも同様)をモックすることで解決しました。 CSSモジュールはあくまで、コンポーネントに対してスタイルをあてるものなので、 正しいスタイルがあたっているかというテストをする必要がない限り、CSSモジュールごとモックしてしまって問題ありません。

identity-obj-proxyというパッケージを導入して、moduleNameMapperオプションにCSSモジュール(拡張子がcssやscssなどの場合)の場合は、 identity-obj-proxyを使ってモックする設定を追記することでテスト中のCSSモジュールはモックされるようになりました。

identity-obj-proxyのインストール

$ yarn add --dev identity-obj-proxy

moduleNameMapperにCSSモジュールをモックする設定

module.exports = {
...
  moduleNameMapper: {
    '^src/(.+)': '<rootDir>/src/$1',
    '\\.(css|scss|sass)$': 'identity-obj-proxy'
  },
...
}

参考

jestjs.io