//package.json
{
 "name": "@emg-hub/ui",
 "version": "0.0.0",
 "private": true,
 "exports": {
 "./*": "./src/*.tsx"
 },
 "scripts": {
 "lint": "eslint . --max-warnings 0",
 "generate:component": "turbo gen react-component",
 "test": "vitest"
 },
 "devDependencies": {
 "@emg-hub/eslint-config": "*",
 "@emg-hub/typescript-config": "*",
 "@testing-library/dom": "^10.4.1",
 "@testing-library/jest-dom": "^6.8.0",
 "@testing-library/react": "^16.3.0",
 "@testing-library/user-event": "^14.6.1",
 "@types/node": "^24.3.0",
 "@types/react": "19.1.12",
 "@types/react-dom": "19.1.9",
 "@vitejs/plugin-react": "^5.0.2",
 "@vitest/coverage-v8": "^3.2.4",
 "@vitest/ui": "^3.2.4",
 "eslint": "^9.34.0",
 "jsdom": "^26.1.0",
 "typescript": "5.9.2",
 "vite-tsconfig-paths": "^5.1.4",
 "vitest": "^3.2.4"
 },
 "dependencies": {
 "react": "^19.1.1",
 "react-dom": "^19.1.1"
 }
}

//vitest.config.mjs
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { configDefaults } from 'vitest/config'
export default defineConfig({
 plugins: [react()],
 test: {
 globals: true,
 environment: 'jsdom',
 exclude: [...configDefaults.exclude, 'e2e/*'], // optional
 coverage: {
 provider: 'v8', // or 'c8'
 reporter: ['text', 'json', 'html'],
 exclude: ['vite.config.*', 'src/main.*', '**/*.d.ts', '**/__tests__/**'],
 },
 },
})

//button.tsx
import { ReactNode } from "react";
interface ButtonProps {
 children: ReactNode;
 className?: string;
 appName: string;
}
export const Button = ({ children, className, appName }: ButtonProps) => {
 return (
 <button
 className={className}
 onClick={() => alert(`Hello from your ${appName} app!`)}
 >
 {children}
 </button>
 );
};

//button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { Button } from './button';
describe('Button', () => {
 beforeEach(() => {
 vi.clearAllMocks();
 });
 describe('rendering', () => {
 it('renders simple div', () => {
 render(<div>Click me</div>);
 expect(screen.getByText('Click me')).toBeInTheDocument();
 });
 it('renders with children text', () => {
 render(<Button appName="test">Click me</Button>);
 expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
 });
 });
});