Adding jest tests

apps/app/jest.config.js

@@ -0,0 +1,27 @@
+const { compilerOptions } = require('./tsconfig')
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  roots: ['<rootDir>'],
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  modulePaths: ['./'],
+  setupFilesAfterEnv: ['./test/jestSetup.ts'],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+    '.+\\.(css|less|sass|scss|png|jpg|gif|ttf|woff|woff2|svg)$':
+      'jest-transform-stub',
+  },
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+}

apps/app/package.json

@@ -7,33 +7,40 @@
     "dev": "vite",
     "lint": "eslint . --max-warnings 0",
     "build": "vite build",
-    "test": "vitest run",
+    "test": "jest",
     "test:coverage": "vitest --coverage",
     "test:e2e": "playwright test",
     "preview": "vite preview"
   },
   "dependencies": {
     "@playwright/test": "^1.48.2",
     "@repo/ui": "workspace:*",
+    "@testing-library/dom": "^10.4.0",
+    "@types/jest": "^29.5.14",
+    "@types/testing-library__react": "^10.2.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "playwright": "^1.48.2",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "ts-jest": "^29.2.5"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/playwright-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@repo/vite-config": "workspace:*",
+    "@swc/core": "^1.9.1",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "@vitest/coverage-v8": "2.1.3",
-    "@vitest/ui": "2.1.3",
     "eslint": "^8",
+    "jest": "^29.7.0",
     "jsdom": "^25.0.1",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.3"
+    "vite": "^5.4.10"
   }
 }

apps/app/src/App.tsx

@@ -1,9 +1,7 @@
-import { Button } from "@repo/ui";
 export default function App() {
   return (
     <div>
       <h4>Hello World</h4>
-      <Button>Test</Button>
     </div>
-  );
+  )
 }

apps/app/src/main.spec.tsx

@@ -1,10 +1,8 @@
-import { describe, expect, test } from "vitest";
-import { screen, render } from "@testing-library/react";
-import App from "./App";
-
-describe("App", () => {
-  test("renders", () => {
-    render(<App />);
-    expect(screen.getByText("Hello World")).toBeDefined();
-  });
-});
+import { screen, render, getByText } from '@testing-library/react'
+import App from './App'
+describe('App', () => {
+  it('renders', () => {
+    render(<App />)
+    expect(screen.getByAltText('Hello World')).toBeInTheDocument()
+  })
+})

apps/app/test/jestSetup.ts

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

apps/app/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
-  "include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["test/jestSetup.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

apps/next-app/app/layout.tsx

@@ -1,35 +1,36 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next'
+import localFont from 'next/font/local'
+import './globals.css'
 
-import { AntdRegistry } from "@ant-design/nextjs-registry";
+import { AntdRegistry } from '@ant-design/nextjs-registry'
+import React from 'react'
 
 const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
+})
 const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
+})
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
         <AntdRegistry>{children}</AntdRegistry>
       </body>
     </html>
-  );
+  )
 }

libs/ui/src/components/Button/index.tsx

@@ -3,19 +3,19 @@ import type { CSSProperties } from 'react'
 import styles from './button.module.css'
 
 export interface ButtonProps {
-  htmlType: 'button' | 'submit' | 'reset'
+  htmlType?: 'button' | 'submit' | 'reset'
   style?: CSSProperties
   children?: any
   onClick?(): void
 }
 
 export const Button = ({
   children,
-  htmlType = 'button',
+  htmlType,
   ...props
 }: PropsWithChildren<ButtonProps>) => {
   return (
-    <button type={htmlType} {...props} className={styles.button}>
+    <button type={htmlType || 'button'} {...props} className={styles.button}>
       {children as any}
     </button>
   )