テストライブラリの導入

__mocks__/fileMock.js

@@ -0,0 +1,6 @@
+module.exports = {
+  src: "/img.jpg",
+  height: 24,
+  width: 24,
+  blurDataURL: "data:image/png;base64,imagedata",
+};

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -0,0 +1,24 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+  moduleNameMapper: {
+    "^@/components/(.*)$": "<rootDir>/components/$1",
+    "^@/styles/(.*)$": "<rootDir>/styles/$1",
+    "^@/lib/(.*)$": "<rootDir>/lib/$1",
+  },
+  testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)"],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "test": "jest",
     "lint": "next lint",
     "format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx}'",
     "storybook": "start-storybook -p 6006 -s ./public",
@@ -29,6 +30,8 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
     "@types/node": "17.0.24",
     "@types/react": "18.0.5",
     "@types/react-dom": "18.0.1",
@@ -38,6 +41,8 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-storybook": "^0.5.11",
     "husky": "^7.0.4",
+    "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.2",
     "lint-staged": "^12.4.1",
     "prettier": "^2.6.2",
     "sb": "^6.4.22",

pages/index.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import Home from "./index";
+import "@testing-library/jest-dom";
+
+describe("Home", () => {
+  const allPostsData = [{ id: "id", date: "2022" }];
+  it("renders a heading", () => {
+    render(<Home allPostsData={allPostsData} />);
+
+    const heading = screen.getByRole("heading", {
+      name: /Next\.js Blog/i,
+    });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

pages/index.tsx

@@ -1,13 +1,15 @@
 import Head from "next/head";
 import Link from "next/link";
 
-import Layout, { siteTitle } from "../components/layout";
-import utilStyles from "../styles/utils.module.css";
-import { getSortedPostsData } from "../lib/posts";
-import Date from "../components/date";
+import Layout, { siteTitle } from "@/components/layout";
+import utilStyles from "@/styles/utils.module.css";
+import { getSortedPostsData } from "@/lib/posts";
+import Date from "@/components/date";
 
 export async function getStaticProps() {
   const allPostsData = getSortedPostsData();
+  // TODO: jestとstorybookがgetSortedPostsDataを呼び出すと落ちる問題の解決
+  // const allPostsData = [{ id: "id" }];
   return {
     props: {
       allPostsData,
@@ -26,7 +28,7 @@ export default function Home({ allPostsData }: Props) {
         <title>{siteTitle}</title>
       </Head>
       <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
-        <h2 className={utilStyles.headingLg}>Blog</h2>
+        <h2 className={utilStyles.headingLg}>Next.js Blog</h2>
         <ul className={utilStyles.list}>
           {allPostsData.map(({ id, date, title }) => (
             <li className={utilStyles.listItem} key={id}>

tsconfig.json

@@ -13,7 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]