feat(manager-wiki): update doc how to add component

packages/manager-react-components/package.json

@@ -23,9 +23,8 @@
     "dev": "tsc && vite build",
     "prepare": "tsc && vite build",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
-    "test": "TZ=UTC vitest run",
-    "test:cov": "TZ=UTC vitest run --coverage",
-    "test:watch": "TZ=UTC vitest"
+    "test": "TZ=UTC manager-test",
+    "test:ci": "TZ=UTC manager-test run --coverage"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,json,css,md}": [
@@ -53,12 +52,10 @@
     "@ovh-ux/manager-core-utils": "*",
     "@ovh-ux/manager-react-shell-client": "^0.8.7",
     "@ovh-ux/manager-tailwind-config": "^0.3.0",
+    "@ovh-ux/manager-tests-setup": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.10.1",
     "@ovhcloud/ods-components": "^18.6.2",
     "@ovhcloud/ods-themes": "^18.6.2",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.0.0",
-    "@types/jest": "^29.5.5",
     "@types/lodash.isdate": "^4.0.9",
     "@types/lodash.isequal": "^4.5.0",
     "@types/node": "20.4.9",
@@ -93,13 +90,11 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "react-router-dom": "^6.3.0",
-    "ts-jest": "^29.1.1",
     "typescript": "^4.3.2",
     "undici": "5.29.0",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "^3.0.8",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

packages/manager-react-components/vitest.setup.js → packages/manager-react-components/setupTest.ts

@@ -1,4 +1,4 @@
-// vitest.setup.js
+// vitest.setup.ts
 import '@testing-library/jest-dom';
 import 'element-internals-polyfill';
 

packages/manager-react-components/src/components/redirection-guard/redirection-guard.spec.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Navigate } from 'react-router-dom';
 import { RedirectionGuard } from './redirection-guard.component';
-import '@testing-library/jest-dom';
 
 vi.mock('react-router-dom', () => ({
   Navigate: vi.fn(() => null),

packages/manager-react-components/src/components/templates/delete-modal/delete-modal.spec.tsx

@@ -3,7 +3,6 @@ import { waitFor, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '../../../utils/test.provider';
 import { DeleteModal, DeleteModalProps } from './delete-modal.component';
-import '@testing-library/jest-dom';
 
 export const sharedProps: DeleteModalProps = {
   closeModal: vitest.fn(),

packages/manager-react-components/src/hooks/pci/useMaintenance.spec.tsx

@@ -12,7 +12,6 @@ import * as useAggregatedPrivateNetworks from './useAggregatedPrivateNetworks';
 import * as useProjectRegions from './useProjectRegions';
 import { Stein } from './useMigrationSteins';
 import { Region } from './useProjectRegions';
-import '@testing-library/jest-dom';
 
 const renderUseMaintenanceHook = () => {
   const queryClient = new QueryClient();

packages/manager-react-components/vitest.config.js

@@ -1,16 +1,18 @@
 import path from 'path';
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
+import {
+  createConfig,
+  mergeConfig,
+  defaultExcludedFiles,
+} from '@ovh-ux/manager-tests-setup';
+
+export default mergeConfig(createConfig(), {
   test: {
-    setupFiles: 'vitest.setup.js',
+    setupFiles: 'setupTest.ts',
     globals: true,
     environment: 'jsdom',
     coverage: {
       include: ['src'],
-      exclude: [],
+      exclude: [...defaultExcludedFiles],
     },
     testTimeout: 60000,
     fileParallelism: false,

packages/manager-wiki/stories/guidelines/adding-new-component.mdx

@@ -43,8 +43,13 @@ src/
     your-component/
       __tests__
           your-component.test.tsx
+          your-component.snapshot.test.tsx
+          _snapshots_
       your-component.component.tsx
+      your-component.constants.ts
+      your-component.props.ts
       your-component.types.ts
+      your-component.scss
       index.ts
 ```
 
@@ -61,6 +66,11 @@ src/
       index.ts
 ```
 
+### name convention:
+- Package should be `kebab-case`
+- React component, hooks `UpperCamelCase`
+- Test name, file name `UpperCamelCase`
+
 Adding story to manager-wiki
 
 ```
@@ -153,7 +163,74 @@ describe('YourComponent', () => {
 });
 ```
 
-### 6. 📤 Export Component
+Create snaphot
+
+> Info : Components in MRC must have a minimum of 90% coverage. More to follow with respect to Accessibility, visual regression testings.
+
+### 7. 📸 Create Snapshot Tests
+
+Create snapshot tests in `your-component.snapshot.test.tsx`:
+
+```tsx
+import { render } from '@testing-library/react';
+import { YourComponent } from './your-component.component';
+
+describe('YourComponent Snapshot Tests', () => {
+  it('should match snapshot with default props', () => {
+    const { container } = render(<YourComponent prop1="default" prop2={0} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should match snapshot with all props', () => {
+    const { container } = render(
+      <YourComponent 
+        prop1="test value" 
+        prop2={42} 
+        optionalProp={true} 
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different prop combinations', () => {
+    const { container: container1 } = render(
+      <YourComponent prop1="value1" prop2={10} />
+    );
+    expect(container1.firstChild).toMatchSnapshot('with value1 and 10');
+
+    const { container: container2 } = render(
+      <YourComponent prop1="value2" prop2={20} optionalProp={false} />
+    );
+    expect(container2.firstChild).toMatchSnapshot('with value2, 20, and optionalProp false');
+  });
+});
+```
+
+**Snapshot Testing Best Practices:**
+
+- 📸 **Multiple scenarios**: Test different prop combinations to catch visual regressions
+- 🏷️ **Descriptive names**: Use descriptive snapshot names to identify what each snapshot represents
+- 🔄 **Regular updates**: Review and update snapshots when making intentional changes
+- 🎯 **Focused testing**: Test the component's visual output, not implementation details
+- 📁 **Organized structure**: Keep snapshot files in `__tests__/_snapshots_/` directory
+
+**When to update snapshots:**
+- After intentional UI changes
+- When fixing bugs that affect rendering
+- When adding new features that change the component's appearance
+
+**Running snapshot tests:**
+```bash
+# Run all snapshot tests
+npm test -- --testNamePattern="snapshot"
+
+# Update snapshots after intentional changes
+npm test -- --testNamePattern="snapshot" --updateSnapshot
+```
+
+> ⚠️ **Important**: Always review snapshot diffs before accepting changes. Snapshots should reflect intentional UI updates, not accidental regressions.
+
+### 8. Export Component
 
 Add exports in `index.ts`:
 
@@ -164,6 +241,10 @@ export type { nameExportType } from './your-component.types';
 
 > ❌ Do not export with `*`, it can cause issues during the library build
 
+### 8. Storybook Update
+
+Add a documentation for the component in Manager WIKI
+
 ## 🎨 Best Practices
 
 ### Component Design