chore: improve tsconfigs

Author: yordis

.github/pull_request_template.md

@@ -6,7 +6,7 @@
 - [ ] Acceptance criteria are met
 - [ ] All open todos and follow ups are defined in a new ticket and justified
 - [ ] Deviations from the acceptance criteria and design are agreed with the PO and documented.
-- [ ] Jest unit tests ensure that components produce expected outputs on different inputs.
+- [ ] Vitest unit tests ensure that components produce expected outputs on different inputs.
 - [ ] Cypress integration tests ensure that login app pages work as expected. The ZITADEL API is mocked.
 - [ ] No debug or dead code
 - [ ] My code has no repetitions

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

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

apps/login/__test__/tsconfig.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/next.config.js renamed to apps/login/next.config.mjs

@@ -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/package.json

@@ -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,16 +38,18 @@ 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),
             ).not.toBeInTheDocument();
           });
         });
       } 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/src/app/(login)/idp/[provider]/success/page.tsx

@@ -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/__test__/PasswordComplexity.test.tsx renamed to apps/login/src/ui/PasswordComplexity.test.tsx

@@ -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"],
+  },
+});

apps/login/tailwind.config.js

@@ -4,7 +4,7 @@
     "generate": "turbo run generate",
     "build": "turbo run build",
     "test": "turbo run test",
-    "test:unit": "turbo run test:unit",
+    "test:unit": "turbo run test:unit -- --passWithNoTests",
     "test:integration": "turbo run test:integration",
     "test:watch": "turbo run test:watch",
     "dev": "turbo run dev --no-cache --continue",
@@ -16,12 +16,22 @@
     "version-packages": "changeset version",
     "release": "turbo run build --filter=login^... && changeset publish"
   },
+  "pnpm": {
+    "overrides": {
+      "@typescript-eslint/parser": "^7.9.0"
+    }
+  },
   "devDependencies": {
     "@changesets/cli": "^2.22.0",
-    "eslint": "^7.32.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
     "eslint-config-zitadel": "workspace:*",
     "prettier": "^3.2.5",
-    "turbo": "^1.10.8"
+    "tsup": "^8.0.2",
+    "turbo": "^1.10.8",
+    "typescript": "^5.4.5",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   },
   "packageManager": "[email protected]+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589"
 }

apps/login/vitest.config.mts

@@ -4,10 +4,11 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "latest",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-config-turbo": "latest"
+    "eslint-config-next": "^14.2.3",
+    "@typescript-eslint/parser": "^7.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-config-turbo": "^1.13.3"
   },
   "publishConfig": {
     "access": "public"

package.json

@@ -14,24 +14,17 @@
     "build": "tsup --dts",
     "test": "pnpm test:unit",
     "test:watch": "pnpm test:unit:watch",
-    "test:unit": "jest",
-    "test:unit:watch": "jest --watch",
+    "test:unit": "vitest",
+    "test:unit:watch": "vitest --watch",
     "dev": "tsup --watch --dts",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf src/proto"
   },
   "devDependencies": {
     "@bufbuild/buf": "^1.14.0",
-    "@types/jest": "^29.5.1",
     "@zitadel/tsconfig": "workspace:*",
-    "eslint": "^7.32.0",
     "eslint-config-zitadel": "workspace:*",
-    "jest": "^29.5.0",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "ts-proto": "^1.139.0",
-    "tsup": "^5.10.1",
-    "typescript": "^4.9.3"
+    "ts-proto": "^1.139.0"
   },
   "publishConfig": {
     "access": "public"

packages/eslint-config-zitadel/package.json

@@ -1,3 +1,5 @@
+import { describe, expect, test, vitest } from "vitest";
+
 import { CallOptions, ClientMiddlewareCall, Metadata, MethodDescriptor } from "nice-grpc-web";
 import { authMiddleware } from "./middleware";
 
@@ -24,9 +26,9 @@ describe('authMiddleware', () => {
     ];
 
     scenarios.forEach(({ name, initialMetadata, expectedMetadata, token }) => {
-      it(name, async () => {
+      test(name, async () => {
 
-        const mockNext = jest.fn().mockImplementation(async function*() { });
+        const mockNext = vitest.fn().mockImplementation(async function*() { });
         const mockRequest = {};
 
         const mockMethodDescriptor: MethodDescriptor = {

packages/zitadel-client/jest.config.ts

@@ -1,8 +1,5 @@
 {
-  "extends": "@zitadel/tsconfig/node14.json",
-  "include": ["."],
-  "compilerOptions": {
-    "baseUrl": "."
-  },
+  "extends": "@zitadel/tsconfig/tsup.json",
+  "include": ["./src/**/*"],
   "exclude": ["dist", "build", "node_modules"]
 }

packages/zitadel-client/package.json

@@ -13,23 +13,16 @@
     "build": "tsup",
     "test": "pnpm test:unit",
     "test:watch": "pnpm test:unit:watch",
-    "test:unit": "jest --passWithNoTests",
-    "test:unit:watch": "jest --watch",
+    "test:unit": "vitest",
+    "test:unit:watch": "vitest --watch",
     "dev": "tsup --watch",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.1",
     "@types/react": "^17.0.13",
     "@zitadel/tsconfig": "workspace:*",
-    "eslint": "^7.32.0",
     "eslint-config-zitadel": "workspace:*",
-    "jest": "^29.5.0",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "tsup": "^5.10.1",
-    "typescript": "^4.9.3",
     "tailwindcss": "3.2.4",
     "postcss": "8.4.21",
     "zitadel-tailwind-config": "workspace:*",
@@ -38,13 +31,13 @@
   "peerDependencies": {
     "@zitadel/react": "workspace:*",
     "@zitadel/server": "workspace:*",
-    "next": "^13",
+    "next": "^14.2.3",
     "react": "18.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "next": "^13.4.10"
+    "next": "^14.2.3"
   }
 }