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' }, ... }