💥

Next.jsでsvgr/webpackを利用してSVGをimportしたコンポーネントにJestのテストを実行するとエラーになる問題と対策

2022/10/16に公開約2,200字

はじめに

Next.jsでSVGファイルの扱い方を検討したところ、@svgr/webpackプラグインを導入することで実現したかったことが容易に実現できたし、Storybookでも読み込めるように設定が完了して、大変満足していたところに、Jestのテストを走らせると下記のエラーが発生してしまいました。

これまでの過程は下記を参照してください。
https://zenn.dev/toono_f/articles/bd50ddd0a7bc76

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できないらしい。

そうだ、公式ドキュメントを見てみよう・・・
https://react-svgr.com/docs/jest/#testing-with-jest

上記の@svgr/webpackの公式ドキュメントにJestを動かすための設定等が記載されていましたが、Next.js 12.3(2022年10月現在最新Ver)で実装したアプリケーションで上記方法で設定しても、同様のエラーが発生してしまいました。なんてこった😨

そこで、上記のエラーを解決するための手順を紹介します。

エラー対処方法

jest.config.jsmoduleNameMapperに以下記述を追加する

下記設定を追加することで、SVGファイルがimportされた際にモックを利用するようになります。

jest.config.js
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.jsmoduleNameMapperの設定に合わせてください。コンポーネント名も特に決まりはありません(svgrで読み込んでいるSVGファイルのモックコンポーネントになるのでSvgrMockという命名にしました)

src/tests/component-type/__mocks__/SvgrMock.jsx
const SvgrMock = (props) => {
  return <svg {...props} />;
};

export default SvgrMock;

上記工程が終わりましたら、再度Jestのテストを実行してみてください。

SVGファイルをimportしたコンポーネントのerrorであれば、おそらく解決されるかと思われます✨

今回は以上になります。
ここまで読んでいただき、ありがとうございました🙆‍♂️

続きはこちら・・・
https://zenn.dev/toono_f/articles/6c8ef6e4e771b9

Discussion

ログインするとコメントできます