Merge pull request #171 from ictsc/feature/jest_to_vitest

update: vitest に変更

.eslintrc.json

@@ -58,13 +58,27 @@
  "import/no-extraneous-dependencies": [
  "error",
  {
- "devDependencies": false,
+ "devDependencies": true,
  // devDependenciesのimportを禁止
  "optionalDependencies": false
  }
  ]
  },
  "env": {
  "jest": true
- }
+ },
+ // テストファイルのみ global-require を許可
+ "overrides": [
+ {
+ "files": [
+ "**/*.test.ts",
+ "**/*.test.tsx",
+ "**/*.spec.ts",
+ "**/*.spec.tsx"
+ ],
+ "rules": {
+ "global-require": "off"
+ }
+ }
+ ]
 }

__test__/components/Navbar.test.tsx

@@ -1,25 +1,25 @@
-import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
+import { act, render, screen } from "@testing-library/react";
+import mockRouter from "next-router-mock";
+import { Mock, MockInstance, vi } from "vitest";
+
 import ICTSCNavbar from "@/components/Navbar";
 import useAuth from "@/hooks/auth";
 import { testAdminUser, testUser } from "@/types/User";
 
-jest.mock("next/router", () => ({
- useRouter() {
- return {
- route: "/",
- push: () => {},
- };
- },
-}));
+vi.mock("next/router", () => require("next-router-mock"));
+vi.mock("@/hooks/auth");
 
-jest.mock("@/hooks/auth");
+beforeEach(() => {
+ // toHaveBeenCalledTimes がテストごとにリセットされるようにする
+ vi.clearAllMocks();
+});
 
 describe("未ログイン状態 ICTSCNavBar", () => {
  test("正常に表示され未ログイン時の項目が表示されることを確認する", () => {
  // setup
- (useAuth as jest.Mock).mockReturnValue({
+ (useAuth as unknown as MockInstance).mockReturnValue({
  user: null,
  mutate: () => {},
  });
@@ -62,35 +62,59 @@ describe("参加者ログイン状態 ICTSCNavBar", () => {
  expect(screen.queryByText("ログイン")).not.toBeInTheDocument();
 
  // verify
- expect(useAuth).toHaveBeenCalledTimes(2);
+ expect(useAuth).toHaveBeenCalledTimes(1);
  });
 
- test("ログアウトボタンを押した時にログアウト処理が実行されることを確認する", () => {
+ test("チーム名が正しく表示されている", () => {
  // setup
- // TODO(k-shir0): push のテストがない
- const logout = jest.fn().mockResolvedValue({ status: 200 });
- (useAuth as jest.Mock).mockReturnValue({
+ (useAuth as unknown as MockInstance).mockReturnValue({
+ user: testUser,
+ mutate: () => {},
+ });
+
+ // when
+ render(<ICTSCNavbar />);
+
+ // then
+ expect(
+ screen.queryByText(`チーム: ${testUser.user_group.name}`)
+ ).toBeInTheDocument();
+
+ // verify
+ expect(useAuth).toHaveBeenCalledTimes(1);
+ });
+
+ test("ログアウトボタンを押した時にログアウト処理が実行されることを確認する", async () => {
+ // setup
+ mockRouter.push("/");
+ const logout = vi.fn().mockResolvedValue({ status: 200 });
+ (useAuth as unknown as MockInstance).mockReturnValue({
  user: testUser,
  mutate: () => {},
  logout,
  });
  render(<ICTSCNavbar />);
 
  // when
- screen.getByText("ログアウト").click();
+ await act(async () => {
+ screen.getByText("ログアウト").click();
+ });
 
  // then
- expect(logout).toHaveBeenCalledTimes(1);
+ expect(mockRouter).toMatchObject({
+ pathname: "/",
+ });
 
  // verify
- expect(useAuth).toHaveBeenCalledTimes(3);
+ expect(useAuth).toHaveBeenCalledTimes(2);
+ expect(logout).toHaveBeenCalledTimes(1);
  });
 });
 
 describe("管理者ログイン状態 ICTSCNavBar", () => {
  test("正常に表示され管理者ログイン時の項目が表示されることを確認する", () => {
  // setup
- (useAuth as jest.Mock).mockReturnValue({
+ (useAuth as Mock).mockReturnValue({
  user: testAdminUser,
  mutate: () => {},
  });
@@ -108,6 +132,6 @@ describe("管理者ログイン状態 ICTSCNavBar", () => {
  expect(screen.queryByText("ログイン")).not.toBeInTheDocument();
 
  // verify
- expect(useAuth).toHaveBeenCalledTimes(4);
+ expect(useAuth).toHaveBeenCalledTimes(1);
  });
 });

hooks/auth.test.ts → __test__/hooks/auth.test.ts

@@ -1,12 +1,17 @@
 import { renderHook } from "@testing-library/react";
-import expect from "expect";
 import useSWR from "swr";
+import { MockInstance, vi } from "vitest";
 
 import useAuth from "@/hooks/auth";
 import { testUser } from "@/types/User";
 import { AuthSelfResult, Result } from "@/types/_api";
 
-jest.mock("swr");
+vi.mock("swr");
+
+beforeEach(() => {
+ // toHaveBeenCalledTimes がテストごとにリセットされるようにする
+ vi.clearAllMocks();
+});
 
 describe("useAuth", () => {
  it("ユーザーが取得できる", () => {
@@ -18,9 +23,9 @@ describe("useAuth", () => {
  },
  };
 
- (useSWR as jest.Mock).mockReturnValue({
+ (useSWR as unknown as MockInstance).mockReturnValue({
  data: mockAuthResult,
- mutate: jest.fn(),
+ mutate: vi.fn(),
  isLoading: false,
  });
 
@@ -43,9 +48,9 @@ describe("useAuth", () => {
  data: null,
  };
 
- (useSWR as jest.Mock).mockReturnValue({
+ (useSWR as unknown as MockInstance).mockReturnValue({
  data: mockAuthResult,
- mutate: jest.fn(),
+ mutate: vi.fn(),
  isLoading: false,
  });
 
@@ -58,6 +63,6 @@ describe("useAuth", () => {
  expect(result.current.mutate).toBeDefined();
 
  // verify
- expect(useSWR).toBeCalledTimes(2);
+ expect(useSWR).toBeCalledTimes(1);
  });
 });

package.json

@@ -6,17 +6,14 @@
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
- "test": "jest --watch",
- "test:ci": "jest",
+ "test": "vitest --coverage",
  "lint": "next lint",
  "format": "prettier --check --ignore-path .gitignore .",
  "format:fix": "prettier --write --ignore-path .gitignore .",
  "font": "docker build -f Dockerfile.font -t font-builder . && docker run -v $(pwd):/host -it font-builder sh -c \"cp /font/Variable/OTF/Subset/NotoSansJP-VF.woff2 /host/pages/NotoSansJP-VF.woff2 && exit\""
  },
  "dependencies": {
  "@next/font": "^13.1.1",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^14.0.0",
  "@types/node": "18.11.9",
  "@types/react": "18.0.25",
  "@types/react-dom": "18.0.9",
@@ -25,13 +22,9 @@
  "eslint": "8.28.0",
  "eslint-config-airbnb": "^19.0.4",
  "eslint-config-next": "^13.1.1",
- "expect": "^29.5.0",
  "gray-matter": "^4.0.3",
- "ky": "^0.33.0",
- "ky-universal": "^0.11.0",
  "luxon": "^3.2.1",
  "next": "^13.1.1",
- "next-router-mock": "^0.9.7",
  "nookies": "^2.5.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
@@ -46,17 +39,19 @@
  "zenn-markdown-html": "^0.1.81"
  },
  "devDependencies": {
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^14.0.0",
  "@types/luxon": "^3.2.0",
+ "@vitejs/plugin-react": "^4.0.1",
+ "@vitest/coverage-v8": "^0.32.2",
  "autoprefixer": "^10.4.13",
- "babel-jest": "^29.5.0",
  "eslint-config-prettier": "^8.6.0",
  "identity-obj-proxy": "^3.0.0",
- "jest": "^29.5.0",
  "jest-environment-jsdom": "^29.5.0",
- "msw": "^1.2.2",
+ "next-router-mock": "^0.9.7",
  "postcss": "^8.4.19",
  "prettier": "^2.8.4",
- "react-test-renderer": "^18.2.0",
- "tailwindcss": "^3.2.4"
+ "tailwindcss": "^3.2.4",
+ "vitest": "^0.32.2"
  }
 }

tsconfig.json

@@ -20,7 +20,8 @@
  "@/hooks/*": ["hooks/*"],
  "@/layouts/*": ["layouts/*"],
  "@/types/*": ["types/*"]
- }
+ },
+ "types": ["vitest/globals"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import * as path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ globals: true,
+ environment: "jsdom",
+ },
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname),
+ },
+ },
+});