init

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true

package.json

@@ -20,6 +20,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-url": "^8.0.1",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
     "@types/firebase": "^3.2.1",
     "@types/hammerjs": "^2.0.41",
     "@types/react": "^18.2.15",
@@ -37,9 +39,11 @@
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "jsdom": "^23.2.0",
     "prettier": "^3.0.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.7",
-    "vite-plugin-environment": "^1.1.3"
+    "vite-plugin-environment": "^1.1.3",
+    "vitest": "^1.2.0"
   }
 }

src/tests/setup.ts

@@ -0,0 +1,8 @@
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});

src/tests/unit/DifficultyButton.test.tsx

@@ -0,0 +1,24 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { DifficultyButton } from "../../components/DifficultyButton";
+
+describe("DifficultyButton", () => {
+  it("should call changeDifficulty on click", () => {
+    const changeDifficultyHandler = vi.fn();
+    render(
+      <DifficultyButton
+        changeDifficulty={changeDifficultyHandler}
+        disabled={false}
+      >
+        Difficulty
+      </DifficultyButton>
+    );
+
+    const button = screen.getByRole("button", { name: "Difficulty" });
+    fireEvent.click(button);
+
+    expect(changeDifficultyHandler).toHaveBeenCalledTimes(1);
+  });
+});

vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    setupFiles: "./src/tests/setup.ts",
+    globals: true,
+  },
+});