4.4-4.7: set up vitest, react-testing-library, cypress; add component/E2E tests

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3001',
+    supportFile: 'cypress/support/e2e.ts',
+  },
+});

cypress/e2e/homepage.cy.ts

@@ -0,0 +1,6 @@
+describe('Homepage', () => {
+  it('loads successfully', () => {
+    cy.visit('/');
+    cy.contains('Parsa').should('exist');
+  });
+});

cypress/support/e2e.ts

@@ -0,0 +1 @@
+// Cypress E2E support file

package.json

@@ -8,7 +8,10 @@
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --write .",
-    "analyze": "cross-env ANALYZE=true next build"
+    "analyze": "cross-env ANALYZE=true next build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "cypress": "cypress run"
   },
   "dependencies": {
     "cookies-next": "^4.3.0",
@@ -27,6 +30,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "cross-env": "^7.0.3",
+    "cypress": "^15.17.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.11",
     "postcss": "^8",

src/__tests__/services.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Services from '@/app/(routes)/(website)/components/services/services';
+
+const mockDict = {
+  website: {
+    homePage: {
+      services: {
+        title: 'Services',
+        description: 'What I do',
+      },
+    },
+  },
+};
+
+describe('Services Component', () => {
+  it('renders the services section title', () => {
+    render(<Services dict={mockDict} />);
+    expect(screen.getByText('Services')).toBeInTheDocument();
+  });
+
+  it('renders the services section description', () => {
+    render(<Services dict={mockDict} />);
+    expect(screen.getByText('What I do')).toBeInTheDocument();
+  });
+});

src/__tests__/setup.ts

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

vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/__tests__/setup.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});