♻️(docs-app) Switch from Jest tests to Vitest

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(docs-app) Switch from Jest tests to Vitest #1269
 - ⚡️(frontend) improve accessibility:
   - #1248
   - #1235

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -25,7 +25,7 @@ test.describe('Doc Export', () => {
     await createDoc(page, 'doc-editor', browserName, 1);
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -78,8 +78,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 
@@ -130,8 +129,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 
@@ -200,7 +198,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -277,7 +275,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -327,8 +325,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 
@@ -390,8 +387,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 
@@ -465,8 +461,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 
@@ -537,8 +532,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
-        exact: true,
+        name: 'Export the document',
       })
       .click();
 

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -44,7 +44,9 @@ test.describe('Doc Header', () => {
 
     await expect(card.getByText('Owner ·')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Open the document options' }),
     ).toBeVisible();
@@ -115,7 +117,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
 
@@ -185,7 +189,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(page.getByLabel('Delete document')).toBeDisabled();
@@ -245,7 +251,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(page.getByLabel('Delete document')).toBeDisabled();

src/frontend/apps/impress/.env.test

@@ -1 +1,2 @@
 NEXT_PUBLIC_API_ORIGIN=http://test.jest
+NEXT_PUBLIC_PUBLISH_AS_MIT=false

src/frontend/apps/impress/package.json

@@ -11,8 +11,8 @@
     "lint": "tsc --noEmit && next lint",
     "prettier": "prettier --write .",
     "stylelint": "stylelint \"**/*.css\"",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "test": "vitest",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
@@ -67,24 +67,25 @@
     "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/jest": "30.0.0",
     "@types/lodash": "4.17.20",
     "@types/luxon": "3.7.1",
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
+    "@vitejs/plugin-react": "4.7.0",
     "cross-env": "10.0.0",
     "dotenv": "17.2.1",
     "eslint-config-impress": "*",
     "fetch-mock": "9.11.0",
-    "jest": "30.0.5",
-    "jest-environment-jsdom": "30.0.5",
+    "jsdom": "26.1.0",
     "node-fetch": "2.7.0",
     "prettier": "3.6.2",
     "stylelint": "16.23.0",
     "stylelint-config-standard": "39.0.0",
     "stylelint-prettier": "5.0.3",
     "typescript": "*",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.2.4",
     "webpack": "5.101.0",
     "workbox-webpack-plugin": "7.1.0"
   }

src/frontend/apps/impress/src/api/__tests__/APIError.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { APIError, isAPIError } from '@/api';
 
 describe('APIError', () => {

src/frontend/apps/impress/src/api/__tests__/config.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { baseApiUrl } from '@/api';
 
 describe('config', () => {

src/frontend/apps/impress/src/api/__tests__/fetchApi.test.tsx

@@ -1,4 +1,5 @@
 import fetchMock from 'fetch-mock';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { fetchAPI } from '@/api';
 

src/frontend/apps/impress/src/api/__tests__/helpers.test.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { useAPIInfiniteQuery } from '@/api';
 
@@ -21,8 +22,8 @@ const createWrapper = () => {
 
 describe('helpers', () => {
   it('fetches and paginates correctly', async () => {
-    const mockAPI = jest
-      .fn<Promise<DummyResponse>, [{ page: number; query: string }]>()
+    const mockAPI = vi
+      .fn<(params: { page: number; query: string }) => Promise<DummyResponse>>()
       .mockResolvedValueOnce({
         results: [{ id: 1 }],
         next: 'url?page=2',

src/frontend/apps/impress/src/api/__tests__/utils.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { errorCauses, getCSRFToken } from '@/api';
 
 describe('utils', () => {

src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
 import { Box } from '../Box';

src/frontend/apps/impress/src/features/auth/__tests__/utils.test.tsx

@@ -1,49 +1,38 @@
-import { Crisp } from 'crisp-sdk-web';
 import fetchMock from 'fetch-mock';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { gotoLogout } from '../utils';
 
-jest.mock('crisp-sdk-web', () => ({
-  ...jest.requireActual('crisp-sdk-web'),
-  Crisp: {
-    isCrispInjected: jest.fn().mockReturnValue(true),
-    setTokenId: jest.fn(),
-    user: {
-      setEmail: jest.fn(),
-    },
-    session: {
-      reset: jest.fn(),
-    },
-  },
+// Mock the Crisp service
+vi.mock('@/services/Crisp', () => ({
+  terminateCrispSession: vi.fn(),
 }));
 
 describe('utils', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     fetchMock.restore();
   });
 
-  it('checks support session is terminated when logout', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => {});
+  it('checks support session is terminated when logout', async () => {
+    const { terminateCrispSession } = await import('@/services/Crisp');
 
-    window.$crisp = true;
-    const propertyDescriptors = Object.getOwnPropertyDescriptors(window);
-    for (const key in propertyDescriptors) {
-      propertyDescriptors[key].configurable = true;
-    }
-    const clonedWindow = Object.defineProperties({}, propertyDescriptors);
-
-    Object.defineProperty(clonedWindow, 'location', {
+    // Mock window.location.replace
+    const mockReplace = vi.fn();
+    Object.defineProperty(window, 'location', {
       value: {
         ...window.location,
-        replace: jest.fn(),
+        replace: mockReplace,
       },
       writable: true,
       configurable: true,
     });
 
     gotoLogout();
 
-    expect(Crisp.session.reset).toHaveBeenCalled();
+    expect(terminateCrispSession).toHaveBeenCalled();
+    expect(mockReplace).toHaveBeenCalledWith(
+      'http://test.jest/api/v1.0/logout/',
+    );
   });
 });

src/frontend/apps/impress/src/features/auth/hooks/__tests__/useAuth.test.tsx

@@ -1,13 +1,14 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { Fragment } from 'react';
+import { beforeEach, describe, expect, vi } from 'vitest';
 
 import { AbstractAnalytic } from '@/libs';
 import { AppWrapper } from '@/tests/utils';
 
 import { useAuth } from '../useAuth';
 
-const trackEventMock = jest.fn();
+const trackEventMock = vi.fn();
 const flag = true;
 class TestAnalytic extends AbstractAnalytic {
   public constructor() {
@@ -31,19 +32,19 @@ class TestAnalytic extends AbstractAnalytic {
   }
 }
 
-jest.mock('next/router', () => ({
-  ...jest.requireActual('next/router'),
+vi.mock('next/router', async () => ({
+  ...(await vi.importActual('next/router')),
   useRouter: () => ({
     pathname: '/dashboard',
-    replace: jest.fn(),
+    replace: vi.fn(),
   }),
 }));
 
 const dummyUser = { id: '123', email: '[email protected]' };
 
 describe('useAuth hook - trackEvent effect', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     fetchMock.restore();
   });