デフォルトの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/google
のInter
がエラーとなる
該当のソースコード
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 コメント