Integrate Vitest and Testing Library (#23)

* init

* *

* *

* *

* *fix

* *

* *

.github/workflows/main.yml

@@ -15,3 +15,6 @@ jobs:
 
       - name: Lint
         run: yarn lint
+
+      - name: Unit Test
+        run: yarn test:unit

.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

@@ -8,7 +8,8 @@
     "start": "vite --port 3003",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "\"./node_modules/.bin/eslint\" . --ext ts,tsx"
+    "lint": "\"./node_modules/.bin/eslint\" . --ext ts,tsx",
+    "test:unit": "vitest"
   },
   "dependencies": {
     "cuid": "^3.0.0",
@@ -20,6 +21,9 @@
   },
   "devDependencies": {
     "@rollup/plugin-url": "^8.0.1",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/firebase": "^3.2.1",
     "@types/hammerjs": "^2.0.41",
     "@types/react": "^18.2.15",
@@ -37,9 +41,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/components/VolumeButton.tsx

@@ -35,7 +35,11 @@ export const VolumeButton = () => {
   }
 
   return (
-    <StyledButton title="Volume" onClick={() => setIsMuted(!isMuted)}>
+    <StyledButton
+      title="Volume"
+      onClick={() => setIsMuted(!isMuted)}
+      data-testid="volume-button"
+    >
       {isMuted ? <MutedVolumeIcon /> : <VolumeIcon />}
     </StyledButton>
   );

src/components/icons/MutedVolumeIcon.tsx

@@ -12,6 +12,7 @@ export const MutedVolumeIcon = ({ width = 40, height = 40 }: Props) => {
       height={height}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 72 72"
+      data-testid="muted-volume-icon"
     >
       <g strokeMiterlimit="10">
         <path

src/components/icons/VolumeIcon.tsx

@@ -12,6 +12,7 @@ export const VolumeIcon = ({ width = 40, height = 40 }: Props) => {
       height={height}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 72 72"
+      data-testid="volume-icon"
     >
       <g>
         <path

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,25 @@
+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 changeDifficultyMock = vi.fn();
+
+    render(
+      <DifficultyButton
+        changeDifficulty={changeDifficultyMock}
+        disabled={false}
+      >
+        Difficulty
+      </DifficultyButton>
+    );
+
+    const button = screen.getByRole("button", { name: "Difficulty" });
+    fireEvent.click(button);
+
+    expect(changeDifficultyMock).toHaveBeenCalledTimes(1);
+  });
+});

src/tests/unit/VolumeButton.test.tsx

@@ -0,0 +1,30 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { VolumeButton } from "../../components/VolumeButton";
+import { useGlobalStore } from "../../store";
+
+describe("VolumeButton", async () => {
+  it("should display volume-icon by default", () => {
+    render(<VolumeButton />);
+    const volumeIcon = screen.getByTestId("volume-icon");
+
+    expect(volumeIcon).toBeInTheDocument();
+  });
+
+  it("should call setIsMuted & display muted-volume-icon", async () => {
+    const setIsMutedSpy = vi.spyOn(useGlobalStore.getState(), "setIsMuted");
+
+    render(<VolumeButton />);
+
+    await act(async () => {
+      await userEvent.click(screen.getByTestId("volume-button"));
+    });
+    const mutedVolumeIcon = screen.getByTestId("muted-volume-icon");
+
+    expect(setIsMutedSpy).toHaveBeenCalled();
+    expect(mutedVolumeIcon).toBeInTheDocument();
+  });
+});

vitest.config.ts

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