Fix tests

Author: maxfriedmann

package-lock.json

@@ -87,10 +87,12 @@
 	],
 	"devDependencies": {
 		"@codecov/sveltekit-plugin": "^1.7.0",
+		"@fetch-mock/vitest": "^0.2.6",
 		"@playwright/test": "^1.49.1",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
 		"@types/eslint": "^9.6.0",
 		"@types/node": "^22.9.1",
@@ -124,6 +126,7 @@
 		"date-fns": "^4.1.0",
 		"i18next": "^24.2.0",
 		"i18next-browser-languagedetector": "^8.0.0",
+		"jsdom": "^25.0.1",
 		"pulltorefreshjs": "^0.1.22",
 		"svelte": "^5.16.2",
 		"svelte-i18next": "^2.2.2"

package.json

@@ -0,0 +1,4 @@
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+
+expect.extend(matchers);

setupTest.js

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { availableLanguages, currentLanguage, getI18n, t } from "$lib/stores/i18n.store";
-
+ 
 	const i18n = getI18n();
 
 	function changeLanguage(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {

src/lib/modules/i18n/LanguageSelector.svelte

@@ -1,27 +1,23 @@
-import { createI18nStore, currentLanguage } from "$lib/i18n/i18n.store";
-import fetchMockVitest from "@fetch-mock/vitest";
+import { createI18nStore, currentLanguage } from "$lib/stores/i18n.store";
 import { fireEvent, render, screen } from "@testing-library/svelte";
 import { get } from "svelte/store";
+import { describe, expect, it } from "vitest";
 import LanguageSelector from "./LanguageSelector.svelte";
 
 describe("LanguageSelector", () => {
-  beforeEach(() => {
-    fetchMockVitest.mockGlobal();
-    fetchMockVitest.get("/api/i18n/translations", {
-      elements: []
-    });
-  });
-  it("should render correctly", () => {
-    const { getByText } = render(LanguageSelector, { context: new Map([["i18n", createI18nStore()]]) });
-    expect(getByText("i18n.language")).toBeInTheDocument();
-  });
+	it("should render correctly", () => {
+		const { getByText } = render(LanguageSelector, {
+			context: new Map([["i18n", createI18nStore()]])
+		});
+		expect(getByText("i18n.language")).toBeInTheDocument();
+	});
 
-  it("should change language on select change", async () => {
-    render(LanguageSelector, { context: new Map([["i18n", createI18nStore()]]) });
-    const select = screen.getByTestId("language-selector") as HTMLSelectElement;
-    await fireEvent.change(select, { target: { value: "de" } });
-    expect(get(currentLanguage)).toBe("de");
-    await fireEvent.change(select, { target: { value: "en" } });
-    expect(get(currentLanguage)).toBe("en");
-  });
+	it("should change language on select change", async () => {
+		render(LanguageSelector, { context: new Map([["i18n", createI18nStore()]]) });
+		const select = screen.getByTestId("language-selector") as HTMLSelectElement;
+		await fireEvent.change(select, { target: { value: "de" } });
+		expect(get(currentLanguage)).toBe("de");
+		await fireEvent.change(select, { target: { value: "en" } });
+		expect(get(currentLanguage)).toBe("en");
+	});
 });

src/lib/modules/i18n/LanguageSelector.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { breakpointService } from "./breakpoint.service.svelte.js";
+import { breakpointService } from "./breakpoint.service.svelte";
 
 describe("BreakpointService", () => {
 	it("should match breakpoints", () => {

src/lib/modules/navigation/breakpoint.service.test.ts

@@ -5,7 +5,7 @@ import { getContext, setContext } from "svelte";
 import type { Readable } from "svelte/store";
 import { derived, get, writable } from "svelte/store";
 
-const createI18nStore = (i18nNextOptions?: Partial<InitOptions>) => {
+export const createI18nStore = (i18nNextOptions?: Partial<InitOptions>) => {
 	i18nNext.use(LanguageDetector).init({
 		fallbackLng: "en",
 		detection: {
@@ -64,7 +64,7 @@ i18nNext.on("languageChanged", (lng) => {
 	const formattedLanguage = lng.split("-")[0];
 	currentLanguage.set(formattedLanguage);
 });
-export const availableLanguages = writable(["de"]);
+export const availableLanguages = writable(["de", "en"]);
 export const translationsUpdated = writable(undefined);
 
 export function translateInlineTranslation(

src/lib/stores/i18n.store.ts

@@ -1,11 +1,10 @@
 import { codecovSvelteKitPlugin } from "@codecov/sveltekit-plugin";
 import { sveltekit } from "@sveltejs/kit/vite";
-import { svelteTesting } from '@testing-library/svelte/vite';
+import { svelteTesting } from "@testing-library/svelte/vite";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 
-
 const file = fileURLToPath(new URL("package.json", import.meta.url));
 const json = readFileSync(file, "utf8");
 const pkg = JSON.parse(json);
@@ -28,6 +27,7 @@ export default defineConfig({
 		environment: "jsdom",
 		include: ["src/**/*.test.ts"],
 		reporters: ["default", "junit"],
+		setupFiles: ["./setupTest.js"],
 		outputFile: { junit: "test-results/junit.xml" },
 		coverage: {
 			provider: "v8",