Next.jsでsvgr/webpackを利用してSVGをimportしたコンポーネントにJestのテストを実行するとエラーになる問題と対策
はじめに
Next.jsでSVGファイルの扱い方を検討したところ、@svgr/webpackプラグインを導入することで実現したかったことが容易に実現できたし、Storybookでも読み込めるように設定が完了して、大変満足していたところに、Jestのテストを走らせると下記のエラーが発生してしまいました。
これまでの過程は下記を参照してください。
Jestを実行すると発生するエラー内容
console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ForwardRef(LoadableComponent)`.
at useLoadableModule (/node_modules/next/shared/lib/loadable.js:131:5)
~中略~
console.error
Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ForwardRef(LoadableComponent)`.]
なんてこった😨
Jestを利用するためのテストファイルでは、SVGファイルをそのままimportできないらしい。
そうだ、公式ドキュメントを見てみよう・・・
上記の@svgr/webpackの公式ドキュメントにJestを動かすための設定等が記載されていましたが、Next.js 12.3（2022年10月現在最新Ver）で実装したアプリケーションで上記方法で設定しても、同様のエラーが発生してしまいました。なんてこった😨
そこで、上記のエラーを解決するための手順を紹介します。
エラー対処方法
jest.config.jsのmoduleNameMapperに以下記述を追加する
下記設定を追加することで、SVGファイルがimportされた際にモックを利用するようになります。
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
+ moduleNameMapper: {
+ "^.+\\.(svg)$": "<rootDir>/src/tests/component-type/__mocks__/SvgrMock.jsx", // 左記記述は任意のディレクトリとファイル名を指定してください
+ },
};
module.exports = createJestConfig(customJestConfig);
公式ドキュメントだと、moduleNameMapperに登録する値のKeyは\\.svg$と設定されていますが、Next.js 12以降のバージョンでは^.+\\.(svg)$と設定するのが正しいようです。
※ Next.js 12以降で使えるようになったnext/jestを利用したJestの設定を想定しています。
モック用のファイルを作成する
ファイル名や配置先はjest.config.jsのmoduleNameMapperの設定に合わせてください。コンポーネント名も特に決まりはありません（svgrで読み込んでいるSVGファイルのモックコンポーネントになるのでSvgrMockという命名にしました）
const SvgrMock = (props) => {
return <svg {...props} />;
};
export default SvgrMock;
上記工程が終わりましたら、再度Jestのテストを実行してみてください。
SVGファイルをimportしたコンポーネントのerrorであれば、おそらく解決されるかと思われます✨
今回は以上になります。
ここまで読んでいただき、ありがとうございました🙆♂️
続きはこちら・・・
Discussion