Just save this

[ci skip]

jest.config.js

@@ -0,0 +1,21 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({ dir: "./" });
+
+const customJestConfig = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleDirectories: ["node_modules"],
+  moduleNameMapper: {
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^widgets/(.*)$": "<rootDir>/src/widgets/$1",
+  },
+  transformIgnorePatterns: ["/node_modules/"],
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "config/"],
+  collectCoverage: true,
+  coverageDirectory: "coverage",
+  clearMocks: true,
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.i18n.js

@@ -0,0 +1,45 @@
+import i18n from "i18next";
+import { initReactI18next, setI18n } from "react-i18next";
+import rawTranslationEN from "./public/locales/en/common.json";
+import i18nConfig from "./next-i18next.config.js";
+
+const translationEN = {
+  common: rawTranslationEN,
+};
+
+// Set up formatter service
+i18n.services = i18n.services || {};
+i18n.services.formatter = {
+  add: (name, fn) => {
+    i18n.formatters = i18n.formatters || {};
+    i18n.formatters[name] = fn;
+  },
+  format: (value, format, lng, options) => {
+    return i18n.formatters?.[format]?.(value, lng, options) ?? value;
+  },
+};
+
+// Register custom formatters
+i18nConfig.use[0].init(i18n);
+
+// Initialize i18n
+i18n.use(initReactI18next).init({
+  lng: "en",
+  fallbackLng: "en",
+  debug: false,
+  initImmediate: false, // make sure init is synchronous in tests
+  interpolation: {
+    escapeValue: false,
+    format: (value, format, lng, options) => i18n.services.formatter.format(value, format, lng, options),
+  },
+  resources: {
+    en: translationEN,
+  },
+  ns: ["common"],
+  defaultNS: "common",
+  returnNull: false,
+});
+
+setI18n(i18n);
+
+export default i18n;

jest.setup.js

@@ -0,0 +1,20 @@
+import "@testing-library/jest-dom";
+import "./jest.i18n.js";
+
+jest.mock("utils/proxy/use-widget-api");
+
+jest.mock("next-i18next", () => {
+  const reactI18next = require("react-i18next");
+  const i18n = require("./jest.i18n").default;
+
+  return {
+    useTranslation: () => reactI18next.useTranslation("", { i18n }),
+    Trans: reactI18next.Trans,
+    I18nextProvider: reactI18next.I18nextProvider,
+    appWithTranslation: (Component) => (props) => (
+      <reactI18next.I18nextProvider i18n={i18n}>
+        <Component {...props} />
+      </reactI18next.I18nextProvider>
+    ),
+  };
+});

package.json

@@ -8,7 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "telemetry": "next telemetry disable"
+    "telemetry": "next telemetry disable",
+    "test": "jest"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -46,6 +47,10 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.0.9",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "babel-jest": "^29.7.0",
     "eslint": "^9.21.0",
     "eslint-config-next": "^15.1.7",
     "eslint-config-prettier": "^10.0.2",
@@ -54,10 +59,14 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.5.2",
     "prettier": "^3.5.2",
     "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "^4.0.9",
+    "ts-node": "^10.9.2",
     "typescript": "^5.7.3"
   },
   "optionalDependencies": {

src/utils/proxy/__mocks__/use-widget-api.js

@@ -0,0 +1,17 @@
+let mockResponses = {};
+
+export function __setEndpointMockData(endpoint, response) {
+  mockResponses[endpoint] = response;
+}
+
+export function __setEndpointMockError(endpoint, error) {
+  mockResponses[endpoint] = error;
+}
+
+export function __clearMocks() {
+  mockResponses = {};
+}
+
+export default function useWidgetAPI(widget, endpoint) {
+  return mockResponses[endpoint] ?? { data: undefined, error: undefined };
+}

src/widgets/gitlab/__tests__/component.test.jsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import Component from "widgets/gitlab/component";
+import { SettingsContext } from "utils/contexts/settings";
+import React from "react";
+
+import { __setEndpointMockData, __clearMocks } from "utils/proxy/use-widget-api";
+
+const mockSettings = {
+  hideErrors: false,
+};
+
+const service = {
+  name: "Gitlab",
+  widget: {
+    type: "gitlab",
+    key: "gitlabapikey",
+    url: "https://127.0.0.1",
+  },
+};
+
+describe("Gitlab Widget", () => {
+  beforeEach(() => {
+    __clearMocks();
+  });
+
+  it("renders", () => {
+    render(
+      <SettingsContext.Provider value={{ settings: mockSettings }}>
+        <Component service={service} />
+      </SettingsContext.Provider>,
+    );
+
+    expect(screen.getByText(/Groups/i)).toBeInTheDocument();
+    expect(screen.getByText(/Issues/i)).toBeInTheDocument();
+    expect(screen.getByText(/Merge Requests/i)).toBeInTheDocument();
+    expect(screen.getByText(/Projects/i)).toBeInTheDocument();
+  });
+
+  it("renders with sample data", () => {
+    __setEndpointMockData("counts", {
+      data: {
+        groups_count: 3,
+        issues_count: 7,
+        merge_requests_count: 2,
+        projects_count: 5,
+      },
+    });
+
+    render(
+      <SettingsContext.Provider value={{ settings: {} }}>
+        <Component service={service} />
+      </SettingsContext.Provider>,
+    );
+
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("7")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+});