Next.jsでのVitestのテストのrenderエラー

デフォルトのNext.jsプロジェクトをVitestのテストに通るようにしたい

前提

・create-next-app(Next.js ver13)でデフォルトプロジェクトを作成
・以下リポジトリを参考にVitestを導入
・デフォルトのインデックスページを対象としたテストファイルを作成する
vitest runでテスト実行

https://github.com/vercel/next.js/tree/canary/examples/with-vitest

発生している問題・エラーメッセージ

TypeError: Inter is not a function

next/font/googleInterがエラーとなる

該当のソースコード

pages/index.tsx

1import Head from "next/head"; 2import Image from "next/image"; 3import { Inter } from "next/font/google"; 4import styles from "@/styles/Home.module.css"; 5 6const inter = Inter({ subsets: ["latin"] }); //エラー箇所

__tests__/Home.test.tsx

1import { expect, test } from "vitest"; 2import { render, screen, within } from "@testing-library/react"; 3import Home from "../pages"; 4 5test("home", () => { 6 render(<Home />); 7});

上記テストを実行するとテストエラーとなる

補足情報(FW/ツールのバージョンなど)

"dependencies": { "@types/node": "18.15.0", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "eslint": "8.36.0", "eslint-config-next": "13.2.4", "next": "13.2.4", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.5" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/testing-library__user-event": "^4.2.0", "@vitejs/plugin-react": "^3.1.0", "@vitest/ui": "^0.29.2", "jsdom": "^21.1.0", "vitest": "^0.29.2" }

コメントを投稿

0 コメント