feat(TAS-2): add vitest & RTL

.github/workflows/CI-workflow.yml

@@ -43,8 +43,8 @@ jobs:
             - name: Typecheck
               run: pnpm typecheck:frontend
 
-            #      - name: Unit tests
-            #        run: pnpm test:frontend:ci
+            - name: Unit tests
+              run: pnpm test:frontend:ci
 
             - name: Build
               run: pnpm build:frontend

apps/frontend/.lintstagedrc.mjs

@@ -1,4 +1,5 @@
 export default {
   '*.{ts,tsx,js,jsx,mjs}': ['eslint --fix --no-warn-ignored', 'prettier --write'],
   '*.{json,css,md}': ['prettier --write'],
+  '*.{ts,tsx}': ['vitest related --run'],
 };

apps/frontend/package.json

@@ -16,7 +16,9 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:ci": "vitest run"
   },
   "keywords": [],
   "author": "",
@@ -41,19 +43,26 @@
   },
   "devDependencies": {
     "@feature-sliced/steiger-plugin": "^0.5.7",
+    "@storybook/nextjs-vite": "^10.3.3",
     "@tailwindcss/postcss": "^4.2.0",
     "@tanstack/eslint-plugin-query": "^5.91.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "eslint-config-next": "^16.1.6",
+    "eslint-plugin-storybook": "^10.3.3",
+    "jsdom": "^29.0.1",
     "postcss": "^8.5.6",
     "shadcn": "^3.8.5",
     "steiger": "^0.5.11",
+    "storybook": "^10.3.3",
     "tailwindcss": "^4.2.0",
     "tw-animate-css": "^1.4.0",
-    "storybook": "^10.3.3",
-    "@storybook/nextjs-vite": "^10.3.3",
     "vite": "^8.0.2",
-    "eslint-plugin-storybook": "^10.3.3"
+    "vitest": "^4.1.2"
   }
 }

apps/frontend/src/shared/config/vitest-setup.ts

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

apps/frontend/src/shared/lib/sum/sum.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest';
+import { sum } from './sum';
+
+//todo example test, remove later
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3);
+});

apps/frontend/src/shared/lib/sum/sum.ts

@@ -0,0 +1,3 @@
+export function sum(a: number, b: number) {
+  return a + b;
+}

apps/frontend/src/shared/ui/Button/button.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './button';
+
+test('рендерит кнопку с текстом', () => {
+  render(<Button>Нажми меня</Button>);
+  expect(screen.getByRole('button', { name: 'Нажми меня' })).toBeInTheDocument();
+});
+
+test('вызывает onClick при клике', async () => {
+  const handleClick = vi.fn();
+
+  render(<Button onClick={handleClick}>Нажми меня</Button>);
+  await userEvent.click(screen.getByRole('button', { name: 'Нажми меня' }));
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+
+test('не вызывает onClick когда кнопка disabled', async () => {
+  const handleClick = vi.fn();
+
+  render(
+    <Button disabled onClick={handleClick}>
+      Нажми меня
+    </Button>
+  );
+  await userEvent.click(screen.getByRole('button', { name: 'Нажми меня' }));
+  expect(handleClick).not.toHaveBeenCalled();
+});
+
+test('кнопка задизейблена при передаче пропа disabled', () => {
+  render(<Button disabled>Нажми меня</Button>);
+  expect(screen.getByRole('button', { name: 'Нажми меня' })).toBeDisabled();
+});
+
+test('применяет вариант destructive', () => {
+  render(<Button variant="destructive">Удалить</Button>);
+  expect(screen.getByRole('button', { name: 'Удалить' })).toHaveAttribute(
+    'data-variant',
+    'destructive'
+  );
+});
+
+test('принимает дополнительный className', () => {
+  render(<Button className="my-class">Кнопка</Button>);
+  expect(screen.getByRole('button', { name: 'Кнопка' })).toHaveClass('my-class');
+});

apps/frontend/steiger.config.ts

@@ -1,4 +1,13 @@
 import { defineConfig } from 'steiger';
 import fsd from '@feature-sliced/steiger-plugin';
 
-export default defineConfig([...fsd.configs.recommended]);
+export default defineConfig([
+  ...fsd.configs.recommended,
+  {
+    // disable the `public-api` rule for files in the shared/config
+    files: ['./src/shared/config/**'],
+    rules: {
+      'fsd/public-api': 'off',
+    },
+  },
+]);

apps/frontend/tsconfig.json

@@ -14,6 +14,7 @@
         "name": "next"
       }
     ],
+    "types": ["vitest/globals"],
     "paths": {
       "*": ["./src/*", "./public/*"]
     }

apps/frontend/vitest.config.ts

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

package.json

@@ -24,6 +24,7 @@
     "lint:backend": "pnpm --filter @task-tracker/backend lint",
     "format:check:backend": "pnpm --filter @task-tracker/backend format:check",
     "test:backend:ci": "pnpm --filter @task-tracker/backend test:ci",
+    "test:frontend:ci": "pnpm --filter @task-tracker/frontend test:ci",
     "typecheck:backend": "pnpm --filter @task-tracker/backend typecheck",
     "prisma:generate:backend": "pnpm --filter @task-tracker/backend prisma:generate",
     "prisma:migrate:deploy:backend": "pnpm --filter @task-tracker/backend prisma:migrate:deploy",