テストツールの追加

.github/workflows/lint.yml → .github/workflows/ci.yml

@@ -1,9 +1,9 @@
-name: linter
+name: ci
 
 on: push
 
 jobs:
-  linter:
+  ci:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
@@ -29,9 +29,22 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install
-      - name: Run lint
-        run: pnpm run type-check
+
       - name: Run format
         run: pnpm run format
+
+      # MEMO: ここでnext-env.d.tsが生成される。そのためtype-checkよりも先に実行する必要がある
       - name: Run lint
         run: pnpm run lint
+
+      - name: Run type check
+        run: pnpm run type-check
+
+      - name: Install playwright
+        run: pnpm run install-playwright
+
+      - name: Run test
+        run: pnpm run test
+
+      - name: Run test storybook
+        run: pnpm run test-storybook:ci

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+vitest.config.ts.*
 
 # next.js
 /.next/

package.json

@@ -2,16 +2,22 @@
   "name": "k8o",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint --max-warnings 0",
     "format": "prettier -w src/",
     "type-check": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "postinstall": "pnpm run build"
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
+    "test-storybook": "test-storybook",
+    "test-storybook:ci": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook --quiet && pnpm dlx http-server storybook-static --port 6006 --silent\" \"pnpm dlx wait-on tcp:6006 && pnpm run test-storybook --maxWorkers=2\"",
+    "install-playwright": "playwright install --with-deps"
   },
   "dependencies": {
     "@heroicons/react": "2.1.5",
@@ -43,21 +49,31 @@
     "@storybook/nextjs": "8.2.6",
     "@storybook/react": "8.2.6",
     "@storybook/test": "8.2.6",
+    "@storybook/test-runner": "0.19.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.0.0",
     "@types/mdx": "2.0.13",
     "@types/node": "22.0.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitest/browser": "2.0.4",
+    "@vitest/coverage-istanbul": "2.0.4",
+    "@vitest/ui": "2.0.4",
+    "axe-playwright": "2.0.1",
     "chromatic": "11.5.6",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-storybook": "0.8.0",
+    "playwright": "1.45.3",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.5",
     "storybook": "8.2.6",
     "storybook-addon-mock-date": "0.6.0",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "vitest": "2.0.4"
   },
   "engines": {
     "node": ">=20.0.0",