Could not locate module XXX.css mapped as: identity-obj-proxy.のエラー解決方法

はじめに

ReactとTypeScriptのアプリのテストをJestを用いて実行したときに、Could not locate module ./＜ファイル名＞.css mapped as: identity-obj-proxy.というエラーが発生したので解決方法をまとめます。

エラー内容

このエラーは、JestがCSSやLESSファイルを、テスト環境でモックとして扱うためにidentity-obj-proxyというパッケージを使用するが、今回は正しくインストールされていないことが原因らしい。

解決方法

以下のコマンドをルートディレクトリで実行する。

terminal

npm install identity-obj-proxy --save-dev

すると、package.jsonのdevDependenciesセクションに、identity-obj-proxyが設定され、テストが上手く動作しました。

package.json

{
  "devDependencies": {
      "identity-obj-proxy": "^3.0.0",
  }
}

補足事項

テストは成功しましたが、以下の注意文が出力されました。

terminal

If you have issues related to imports, you should consider setting esModuleInterop to true in your TypeScript configuration file (usually tsconfig.json). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

こちらの解決方法は、tsconfig.jsonに以下の内容に修正することで、注意文が出力されなくなりました。

tsconfig.json

- "compilerOptions": { "jsx": "react-jsx",}
+ "compilerOptions": { "jsx": "react-jsx", "esModuleInterop": true }

参考サイト