chore: improve tsconfigs

apps/login/.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   extends: ["next/core-web-vitals"],
   ignorePatterns: ["external/**/*.ts"],
+  rules: {
+    "@next/next/no-html-link-for-pages": "off",
+  },
 };

apps/login/__test__/jest.config.ts

@@ -1,22 +0,0 @@
-import type { Config } from "@jest/types";
-import { pathsToModuleNameMapper } from "ts-jest";
-import { compilerOptions } from "../tsconfig.json";
-
-// We make these type imports explicit, so IDEs with their own typescript engine understand them, too.
-import type {} from "@testing-library/jest-dom";
-
-export default async (): Promise<Config.InitialOptions> => {
-  return {
-    preset: "ts-jest",
-    transform: {
-      "^.+\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.json" }],
-    },
-    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
-    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-      prefix: "<rootDir>/../",
-    }),
-    testEnvironment: "jsdom",
-    testRegex: "/__test__/.*\\.test\\.tsx?$",
-    modulePathIgnorePatterns: ["cypress"],
-  };
-};

apps/login/__test__/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsxdev",
-    "types": ["node", "jest", "@testing-library/jest-dom"]
-  }
-}

apps/login/next.config.mjs

@@ -62,4 +62,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

apps/login/package.json

@@ -5,7 +5,7 @@
     "dev": "next dev",
     "test": "concurrently --timings --kill-others-on-fail 'npm:test:unit' 'npm:test:integration'",
     "test:watch": "concurrently --kill-others 'npm:test:unit:watch' 'npm:test:integration:watch'",
-    "test:unit": "jest --config ./__test__/jest.config.ts",
+    "test:unit": "vitest",
     "test:unit:watch": "pnpm test:unit --watch",
     "test:integration": "pnpm mock:build && concurrently --names 'mock,test' --success command-test --kill-others 'pnpm:mock' 'env-cmd -f ./.env.integration start-server-and-test start http://localhost:3000 \"test:integration:run\"'",
     "test:integration:watch": "concurrently --names 'mock,test' --kill-others 'pnpm:mock' 'env-cmd -f ./.env.integration start-server-and-test dev http://localhost:3000 \"pnpm nodemon -e js,jsx,ts,tsx,css,scss --ignore \\\"__test__/**\\\" --exec \\\"pnpm test:integration:run\\\"\"'",
@@ -42,54 +42,46 @@
     "clsx": "1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "moment": "^2.29.4",
-    "next": "13.4.12",
+    "next": "14.2.3",
     "next-themes": "^0.2.1",
     "nice-grpc": "2.0.1",
     "qrcode.react": "^3.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-hook-form": "7.39.5",
-    "sass": "^1.62.0",
     "swr": "^2.2.0",
     "tinycolor2": "1.4.2"
   },
   "devDependencies": {
-    "@zitadel/prettier-config": "workspace:*",
     "@bufbuild/buf": "^1.14.0",
-    "@jest/types": "^29.5.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.1",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@types/ms": "0.7.31",
     "@types/node": "18.11.9",
     "@types/react": "18.2.8",
     "@types/react-dom": "18.0.9",
-    "@types/testing-library__jest-dom": "^5.14.6",
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "^9.0.1",
     "@vercel/git-hooks": "1.0.0",
+    "@zitadel/prettier-config": "workspace:*",
     "@zitadel/tsconfig": "workspace:*",
     "autoprefixer": "10.4.13",
     "concurrently": "^8.1.0",
-    "cypress": "^12.14.0",
+    "cypress": "^13.9.0",
     "del-cli": "5.0.0",
     "env-cmd": "^10.1.0",
     "eslint-config-zitadel": "workspace:*",
     "grpc-tools": "1.11.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-silent-reporter": "^0.5.0",
     "lint-staged": "13.0.3",
     "make-dir-cli": "3.0.0",
     "nodemon": "^2.0.22",
     "postcss": "8.4.21",
     "prettier-plugin-tailwindcss": "0.1.13",
+    "sass": "^1.77.1",
     "start-server-and-test": "^2.0.0",
     "tailwindcss": "3.2.4",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
     "ts-proto": "^1.139.0",
-    "typescript": "5.0.4",
+    "typescript": "^5.4.5",
     "zitadel-tailwind-config": "workspace:*"
   }
 }

apps/login/src/app/(login)/idp/[provider]/success/page.tsx

@@ -136,7 +136,7 @@ export default async function Page({
                       <div className="w-full">
                         {
                           <Alert type={AlertType.ALERT}>
-                            {JSON.stringify(error.message)}
+                            {JSON.stringify(error.details)}
                           </Alert>
                         }
                       </div>

apps/login/src/ui/PasswordComplexity.test.tsx

@@ -1,7 +1,12 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
-import PasswordComplexity from "@/ui/PasswordComplexity";
-// TODO: Why does this not compile?
-// import { ResourceOwnerType } from '@zitadel/server';
+import { expect, describe, test, beforeEach, afterEach } from "vitest";
+import {
+  render,
+  cleanup,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import PasswordComplexity from "./PasswordComplexity";
 
 const matchesTitle = `Matches`;
 const doesntMatchTitle = `Doesn't match`;
@@ -33,8 +38,10 @@ describe("<PasswordComplexity/>", () => {
           />,
         );
       });
+      afterEach(cleanup);
+
       if (expectSVGTitle === false) {
-        it(`should not render the feedback element`, async () => {
+        test(`should not render the feedback element`, async () => {
           await waitFor(() => {
             expect(
               screen.queryByText(feedbackElementLabel),
@@ -42,7 +49,7 @@ describe("<PasswordComplexity/>", () => {
           });
         });
       } else {
-        it(`Should show one SVG with title ${expectSVGTitle}`, async () => {
+        test(`Should show one SVG with title ${expectSVGTitle}`, async () => {
           await waitFor(async () => {
             const svg = within(
               screen.getByText(feedbackElementLabel)

apps/login/tailwind.config.js

@@ -38,11 +38,7 @@ types.forEach((type) => {
 module.exports = {
   presets: [sharedConfig],
   darkMode: "class",
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./page/**/*.{js,ts,jsx,tsx}",
-    "./ui/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   future: {
     hoverOnlyWhenSupported: true,
   },

apps/login/vitest.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+  test: {
+    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+    environment: "jsdom",
+    setupFiles: ["@testing-library/jest-dom/vitest"],
+  },
+});