chore(ui): vitest follow-ups (#4993)

* chore(ui): vitest follow-ups

* markdown plugin

.changeset/long-singers-drive.md

@@ -0,0 +1,6 @@
+---
+'@verdaccio/ui-theme': patch
+'@verdaccio/ui-components': patch
+---
+
+chore(ui): vitest follow-ups

packages/plugins/ui-theme/package.json

@@ -30,6 +30,7 @@
     "@verdaccio/node-api": "workspace:8.0.0-next-8.4",
     "@verdaccio/types": "workspace:*",
     "@verdaccio/ui-components": "workspace:4.0.0-next-8.2",
+    "@vitejs/plugin-react": "4.3.4",
     "babel-loader": "8.3.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "country-flag-icons": "1.5.13",

packages/plugins/ui-theme/vitest.config.mjs

@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
 import path from 'node:path';
-import markdown from 'vite-plugin-markdown';
+import { plugin as markdown } from 'vite-plugin-markdown';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({

packages/plugins/ui-theme/vitest.setup.ts

@@ -1,30 +0,0 @@
-import '@testing-library/jest-dom';
-import 'mutationobserver-shim';
-import { vi } from 'vitest';
-import 'whatwg-fetch';
-
-// @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
-global.__VERDACCIO_BASENAME_UI_OPTIONS = {
-  base: 'http://localhost:9000/',
-  protocol: 'http',
-  host: 'localhost',
-  primaryColor: '#4b5e40',
-  url_prefix: '',
-  darkMode: false,
-  language: 'en-US',
-  uri: 'http://localhost:9000/',
-  pkgManagers: ['pnpm', 'yarn', 'npm'],
-  title: 'Verdaccio Dev UI',
-  scope: '',
-  version: 'v1.0.0',
-};
-
-// mocking few DOM methods
-// @ts-ignore : Property 'document' does not exist on type 'Global'.
-if (global.document) {
-  // @ts-ignore : Type 'Mock<{ selectNodeContents: () => void; }, []>' is not assignable to type '() => Range'.
-  document.createRange = vi.fn((): void => ({
-    selectNodeContents: (): void => {},
-  }));
-  document.execCommand = vi.fn();
-}

packages/ui-components/package.json

@@ -73,16 +73,16 @@
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "whatwg-fetch": "3.6.20",
-    "jsdom": "^24.0.0",
-    "mutationobserver-shim": "0.3.7",
-    "vitest": "2.1.2",
-    "@vitejs/plugin-react": "^4.3.4",
     "@verdaccio/types": "workspace:13.0.0-next-8.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^24.0.0",
     "babel-loader": "9.1.3",
     "mockdate": "3.0.5",
+    "mutationobserver-shim": "0.3.7",
     "msw": "0.49.3",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "vitest": "2.1.2",
+    "whatwg-fetch": "3.6.20"
   },
   "msw": {
     "workerDirectory": "public"

packages/ui-components/vitest.setup.ts

@@ -1,46 +0,0 @@
-import '@testing-library/jest-dom';
-import 'mutationobserver-shim';
-import { afterAll, afterEach, beforeAll, vi } from 'vitest';
-import 'whatwg-fetch';
-
-import { server } from './jest/server';
-
-//
-// Mock react-markdown globally
-vi.mock('react-markdown', () => import('../__mocks__/react-markdown'));
-
-// @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
-global.__VERDACCIO_BASENAME_UI_OPTIONS = {
-  base: 'http://localhost:9000/',
-  protocol: 'http',
-  host: 'localhost',
-  primaryColor: '#4b5e40',
-  url_prefix: '',
-  darkMode: false,
-  language: 'en-US',
-  uri: 'http://localhost:9000/',
-  pkgManagers: ['pnpm', 'yarn', 'npm'],
-  title: 'Verdaccio Dev UI',
-  scope: '',
-  version: 'v1.0.0',
-};
-
-// mocking few DOM methods
-// @ts-ignore : Property 'document' does not exist on type 'Global'.
-if (global.document) {
-  // @ts-ignore : Type 'Mock<{ selectNodeContents: () => void; }, []>' is not assignable to type '() => Range'.
-  document.createRange = vi.fn((): void => ({
-    selectNodeContents: (): void => {},
-  }));
-  document.execCommand = vi.fn();
-}
-
-beforeAll(() => {
-  server.listen({
-    onUnhandledRequest: 'warn',
-  });
-});
-afterEach(() => server.resetHandlers());
-afterAll(() => {
-  server.close();
-});