test: Headerコンポーネントのテストを追加

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+# アクション名
+name: CI
+
+# タイミングを指定
+on:
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: yarn install
+        run: yarn install
+      - name: eslint review
+        uses: reviewdog/action-eslint@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          reporter: github-pr-review
+          eslint_flags: "./**/*.{js,mjs,cjs,ts,jsx,tsx}"
+      - name: Run eslint
+        run: yarn lint
+      - name: Run Jest
+        run: yarn jest
+      - name: Upload test coverage artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage
+      - name: Show coverage in comments
+        uses: MishaKav/jest-coverage-comment@main

eslint.config.mjs

@@ -7,6 +7,7 @@ import eslintConfigPrettier from "eslint-config-prettier";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { ignores: ["**/__test__/*"] },
   { languageOptions: { globals: globals.browser } },
   { rules: { "no-console": ["error"] } },
   pluginJs.configs.recommended,

package.json

@@ -4,13 +4,14 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "jest": "^29.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
@@ -20,8 +21,9 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "jest",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/"
   },
   "eslintConfig": {
     "extends": [
@@ -44,13 +46,36 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@eslint/js": "^9.16.0",
+    "@testing-library/dom": "^10.4.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react": "^1.1.7",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.37.2",
     "globals": "^15.13.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.4.2",
+    "ts-jest": "^29.2.5",
     "typescript-eslint": "^8.18.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testEnvironment": "jsdom",
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__test__/__mocks__/fileMock.js",
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
   }
 }

src/__test__/__mocks__/fileMock.js

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

src/tests/Header.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Header from "./../components/Header";
+
+test("Headerに表示されるタイトルの確認", async () => {
+  render(<Header />);
+  const linkElement = screen.getByText(/総人口推移グラフ/i);
+  expect(linkElement).toBeInTheDocument();
+});