Merge pull request #1584 from ral-facilities/renovate/develop-major-vitest-monorepo

Update vitest monorepo to v4 (develop) (major)

Author: joelvdavies

package.json

@@ -85,7 +85,7 @@
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/coverage-v8": "4.0.17",
     "cross-env": "10.1.0",
     "cypress": "14.5.4",
     "eslint": "9.39.1",
@@ -105,7 +105,7 @@
     "serve-static": "2.2.0",
     "start-server-and-test": "2.1.2",
     "typescript-eslint": "8.46.3",
-    "vitest": "3.2.4"
+    "vitest": "4.0.17"
   },
   "msw": {
     "workerDirectory": "public"

src/apiConfigProvider.component.test.tsx

@@ -17,8 +17,8 @@ const APIConfigTest: React.FC = (): React.ReactElement => {
 
 describe('APIConfigProvider', () => {
   beforeEach(() => {
-    global.document.dispatchEvent = vi.fn();
-    global.CustomEvent = vi.fn();
+    globalThis.document.dispatchEvent = vi.fn();
+    globalThis.CustomEvent = vi.fn();
   });
 
   afterEach(() => {

src/common/delayedLoader.component.tsx

@@ -13,7 +13,8 @@ const DelayedLoader = (props: DelayedLoaderProps) => {
   const [showLoader, setShowLoader] = React.useState(false);
 
   React.useEffect(() => {
-    let timeout: NodeJS.Timeout | null = null;
+    // Return type reported as number by vscode, but when built seems to use NextJS.Timeout
+    let timeout: ReturnType<typeof setTimeout> | null = null;
 
     if (isLoading) {
       timeout = setTimeout(() => {

src/common/images/uploadImagesDialog.component.test.tsx

@@ -29,7 +29,7 @@ describe('Upload image dialog', () => {
     };
     user = userEvent.setup();
     xhrPostSpy = vi.spyOn(window.XMLHttpRequest.prototype, 'open');
-    global.URL.createObjectURL = vi.fn(() => 'mocked-url');
+    globalThis.URL.createObjectURL = vi.fn(() => 'mocked-url');
     vi.spyOn(console, 'error').mockImplementation(() => {});
   });
 

src/configProvider.component.test.tsx

@@ -71,8 +71,8 @@ vi.mock('./settings', () => ({
 
 describe('ConfigProvider', () => {
   beforeEach(() => {
-    global.document.dispatchEvent = vi.fn();
-    global.CustomEvent = vi.fn();
+    globalThis.document.dispatchEvent = vi.fn();
+    globalThis.CustomEvent = vi.fn();
   });
 
   afterEach(() => {

src/manufacturer/manufacturerTable.component.test.tsx

@@ -34,6 +34,13 @@ describe('Manufacturer Table', () => {
     await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
     await user.click(screen.getByText('Created'));
 
+    // Ripples sometimes appear here, they seem to only be present on WSL and not on VMs & CI - wait for them to go
+    // away so local tests don't interfere
+    await waitFor(() =>
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(view.container.querySelector('.MuiTouchRipple-child')).toBeNull()
+    );
+
     expect(view.asFragment()).toMatchSnapshot();
   });
 

src/setupTests.ts

@@ -18,8 +18,10 @@ afterEach(() => server.resetHandlers());
 // Clean up after the tests are finished.
 afterAll(() => server.close());
 
-window.ResizeObserver = vi.fn().mockImplementation(() => ({
-  disconnect: vi.fn(),
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-}));
+window.ResizeObserver = vi.fn().mockImplementation(function (
+  this: ResizeObserver
+) {
+  this.disconnect = vi.fn();
+  this.observe = vi.fn();
+  this.unobserve = vi.fn();
+}) as unknown as typeof ResizeObserver;

src/systems/systemItemsTable.component.test.tsx

@@ -85,6 +85,13 @@ describe('SystemItemsTable', () => {
 
     expect(await screen.findByText('Clear Filters')).toBeInTheDocument();
 
+    // Ripples sometimes appear here, they seem to only be present on WSL and not on VMs & CI - wait for them to go
+    // away so local tests don't interfere
+    await waitFor(() =>
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(view.container.querySelector('.MuiTouchRipple-child')).toBeNull()
+    );
+
     // Rest in a snapshot
     expect(view.asFragment()).toMatchSnapshot();
   });
@@ -123,6 +130,13 @@ describe('SystemItemsTable', () => {
     );
     await user.click(screen.getByText('Created'));
 
+    // Ripples sometimes appear here, they seem to only be present on WSL and not on VMs & CI - wait for them to go
+    // away so local tests don't interfere
+    await waitFor(() =>
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(view.container.querySelector('.MuiTouchRipple-child')).toBeNull()
+    );
+
     // Rest in a snapshot
     expect(view.asFragment()).toMatchSnapshot();
   });

src/utils.test.tsx

@@ -193,11 +193,14 @@ describe('Utility functions', () => {
       });
 
       // Mocking the ResizeObserver
-      window.ResizeObserver = vi.fn().mockImplementation((callback) => ({
-        observe: () => observeMock(callback),
-        disconnect: vi.fn(),
-        unobserve: vi.fn(),
-      }));
+      window.ResizeObserver = vi.fn().mockImplementation(function (
+        this: ResizeObserver,
+        callback: ResizeObserverCallback
+      ) {
+        this.disconnect = vi.fn();
+        this.observe = () => observeMock(callback);
+        this.unobserve = vi.fn();
+      }) as unknown as typeof ResizeObserver;
 
       renderComponentWithRouterProvider(
         <OverflowTip>
@@ -247,11 +250,14 @@ describe('Utility functions', () => {
       });
 
       // Mocking the ResizeObserver
-      window.ResizeObserver = vi.fn().mockImplementation((callback) => ({
-        observe: () => observeMock(callback),
-        disconnect: vi.fn(),
-        unobserve: vi.fn(),
-      }));
+      window.ResizeObserver = vi.fn().mockImplementation(function (
+        this: ResizeObserver,
+        callback: ResizeObserverCallback
+      ) {
+        this.disconnect = vi.fn();
+        this.observe = () => observeMock(callback);
+        this.unobserve = vi.fn();
+      }) as unknown as typeof ResizeObserver;
 
       renderComponentWithRouterProvider(
         <OverflowTip>Some long text that overflows</OverflowTip>

vite.config.ts

@@ -38,16 +38,6 @@ function jsonHMR(): PluginOption {
   };
 }
 
-// Obtain default coverage config from vitest when not building for production
-// (to avoid importing vitest during build as its a dev dependency)
-let vitestCoverageConfigDefaultsExclude: string[] = [];
-if (process.env.NODE_ENV !== 'production') {
-  await import('vitest/config').then((vitestConfig) => {
-    vitestCoverageConfigDefaultsExclude =
-      vitestConfig.coverageConfigDefaults.exclude;
-  });
-}
-
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
@@ -162,10 +152,8 @@ export default defineConfig(({ mode }) => {
           // Extra for VSCode extension
           ['lcov', { outputFile: 'lcov.info', silent: true }],
         ],
+        include: ['/src/**.{js,jsx,ts,tsx}'],
         exclude: [
-          ...vitestCoverageConfigDefaultsExclude,
-          'public/*',
-          'server/*',
           // Leave handlers to show up unused code
           'src/mocks/browser.ts',
           'src/mocks/server.ts',
@@ -181,7 +169,7 @@ export default defineConfig(({ mode }) => {
       outputFile: env.CI ? { junit: 'test-report.junit.xml' } : undefined,
       deps: {
         optimizer: {
-          web: {
+          client: {
             enabled: true,
             include: [
               '@mui/material',