Add test for the language switcher

frontend/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.app.json" }],
+  },
+  moduleNameMapper: {
+    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+};

frontend/jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

frontend/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.74.4",
@@ -21,13 +22,23 @@
   "devDependencies": {
     "@eslint/js": "^9.22.0",
     "@tanstack/eslint-plugin-query": "^5.73.3",
-    "@types/react": "^19.0.10",
+    "@testing-library/dom": "^10.4.0",
-    "@types/react-dom": "^19.0.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jest": "^29.7.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.3.2",
+    "ts-node": "^10.9.2",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
     "typescript-plugin-css-modules": "^5.1.0",

frontend/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Language } from "../../lib/types";
+import LanguageSwitcher from "./LanguageSwitcher";
+
+const renderSwitcher = (onChange = () => {}, defaultLang = Language.ENG) => {
+  render(<LanguageSwitcher defaultLang={defaultLang} onChange={onChange} />);
+};
+
+test("renders LanguageSwitcher component", async () => {
+  renderSwitcher();
+  const switcher = screen.getByTestId("language-switcher") as HTMLSelectElement;
+
+  expect(switcher.value).toBe(Language.ENG);
+});
+
+test("calls onChange handler when a new language is selected", async () => {
+  const mockOnChange = jest.fn();
+  renderSwitcher(mockOnChange);
+
+  const switcher = screen.getByTestId("language-switcher") as HTMLSelectElement;
+
+  await userEvent.selectOptions(switcher, Language.ESP);
+  expect(mockOnChange).toHaveBeenCalledWith(Language.ESP);
+});
+
+test("renders all language options correctly", () => {
+  renderSwitcher();
+  const options = screen.getAllByRole("option");
+  const languageValues = Object.values(Language);
+
+  expect(options).toHaveLength(languageValues.length);
+  languageValues.forEach((lang, index) => {
+    expect(options[index]).toHaveValue(lang);
+    expect(options[index]).toHaveTextContent(lang.toUpperCase());
+  });
+});

frontend/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -10,6 +10,7 @@ function LanguageSwitcher({
 }) {
   return (
     <select
+      data-testid="language-switcher"
       defaultValue={defaultLang}
       onChange={(ev) => onChange(ev.currentTarget.value as Language)}
       className={styles.languageSwitcher}

frontend/tsconfig.app.json

@@ -24,5 +24,5 @@
 
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
-  "include": ["src"]
+  "include": ["src", "./jest.setup.ts"]
 }