はじめに
Next.jsとVitestを使ってテストを実行していた際に発生したエラーについての記事です。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
現象
テスト実行時に以下のようなエラーが発生しました。
(0 , Geist) is not a function
(0 , Inter) is not a function
原因
テスト対象のlayout.tsxではNext.jsのGoogle Fonts機能を使用していました。
describe("ページコンポーネント", () => {
test("正常にレンダリングされること", () => {
render(
<RootLayout>
<div>テスト</div>
</RootLayout>
);
expect(screen.getByTestId("main-content")).toBeInTheDocument();
});
});
一方、テストコードは以下のようにRootLayoutを直接レンダリングしています。
layout.tsx
import { Geist, Geist_Mono } from "next/font/google";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
しかしVitestのテスト環境（jsdom）ではNext.jsのフォント最適化機能が動作しない ため、Geistや Interが未定義となり上記のエラーが出ていました。
解決方法
今回のケースではフォント指定が必須ではなかったため、該当部分を削除しました。
layout.tsx
// Google Fontsのインポートを削除
<body className="font-sans antialiased">
これでエラーは解消されました。
もし特定のフォントを使用したい場合は、テスト時にモックを用意するなど別の方法が必要になると思います。
終わりに
Next.js独自の機能（フォント最適化など）はテスト環境でそのまま動作しないことがあるようです。