Merge pull request #1544 from silx-kit/vitest

Replace Jest with Vitest

Author: axelboc

.github/workflows/lint-test.yml

@@ -76,9 +76,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Test 👓
-        run: pnpm test -- --reporters="default" --reporters="github-actions"
-        env:
-          CI: true
+        run: pnpm test -- --reporter default --reporter vitest-github-actions-reporter
 
   packages:
     runs-on: ubuntu-latest

CONTRIBUTING.md

@@ -198,27 +198,29 @@ install the recommended extensions.
 
 ## Testing
 
-- `pnpm test` - run unit and feature tests with Jest
-- `pnpm test --watch` - run tests related to changed files in watch mode
-- `pnpm test --watchAll` - run all tests in watch mode
-- `pnpm --filter <project-name> test` - run Jest in a specific project
+- `pnpm test` - run unit and feature tests with [Vitest](https://vitest.dev/) in
+  watch mode (or once when on the CI)
+- `pnpm test run` - run unit and feature tests once
+- `pnpm test [run] <filter>` - run tests matching the given filter
+- `pnpm test -- --project <lib|app|...>` - run Vitest on a specific project
+- `pnpm test:ui` - run tests inside the
+  [Vitest UI](https://vitest.dev/guide/ui.html)
 - `pnpm cypress` - open the
   [Cypress](https://docs.cypress.io/guides/overview/why-cypress.html) end-to-end
   test runner (local dev server must be running in separate terminal)
 - `pnpm cypress:run` - run end-to-end tests once (local dev server must be
   running in separate terminal)
 
-> Note that the workspace's `test` script doesn't recursively run the `test`
-> script in every project like (i.e. it is not equivalent to `pnpm -r test`).
-> Instead, it runs Jest globally using a
-> [`projects` configuration](https://jestjs.io/docs/configuration#projects-arraystring--projectconfig)
-> located in `jest.config.json`. This results in a nicer terminal output when
-> running tests on the entire workspace.
+> Vitest is able to run on the entire monorepo thanks to the
+> [workspace configuration](https://vitest.dev/guide/workspace.html) defined in
+> `vitest.workspace.ts`. It then uses each project's Vite configuration to
+> decide how to run the tests.
 
 ### Feature tests
 
 The `@h5web/app` package includes feature tests written with
-[React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+and running in a [JSDOM environment](https://vitest.dev/guide/environment.html).
 They are located under `src/__tests__`. Each file covers a particular subtree of
 components of H5Web.
 
@@ -237,9 +239,11 @@ would normally; they just don't stick around in the DOM for long.
 This adds a bit of complexity when testing, as React doesn't like when something
 happens after a test has completed. In fact, we have to ensure that every
 component that suspends inside a test **finishes loading before the end of that
-test**. This is where Testing Library's
-[asynchronous methods](https://testing-library.com/docs/dom-testing-library/api-async)
-come in.
+test**. To do so, you can use Testing Library's asynchronous APIs for
+[finding elements](https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries)
+and [interacting with them](https://testing-library.com/docs/user-event), as
+well as Vitest's [`waitFor``](https://vitest.dev/api/vi.html#vi-waitfor-0-34-5)
+utility.
 
 #### Fake timers
 

eslint.shared.js

@@ -117,6 +117,7 @@ module.exports = {
         }),
         createJestOverride({
           ...dependencies,
+          hasJest: /(app|lib|shared)$/u.test(cwd), // until Galex starts supporting Vitest
           rules: {
             'jest/no-focused-tests': 'warn', // warning instead of error
             'jest/prefer-strict-equal': 'off', // `toEqual` is shorter and sufficient in most cases

jest.config.js

@@ -28,7 +28,8 @@
     "lint:cypress:tsc": "tsc --project cypress/tsconfig.json",
     "lint:root:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
     "prettier": "prettier . --cache --check",
-    "test": "jest",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
     "cypress": "cypress open --e2e --browser firefox",
     "cypress:run": "cypress run --e2e",
     "version": "pnpm -r sync-version && git add .",
@@ -37,18 +38,18 @@
   "devDependencies": {
     "@simonsmith/cypress-image-snapshot": "9.0.1",
     "@testing-library/cypress": "10.0.1",
-    "@types/jest": "^29.5.11",
     "@types/node": "^20.10.5",
+    "@vitest/ui": "1.1.3",
     "cypress": "13.6.1",
     "cypress-wait-for-stable-dom": "0.1.0",
     "eslint": "8.56.0",
     "eslint-config-galex": "4.5.2",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.1.1",
-    "ts-jest": "29.1.1",
     "typescript": "5.0.4",
+    "vitest": "1.1.3",
+    "vitest-fail-on-console": "0.5.1",
+    "vitest-github-actions-reporter": "0.11.1",
     "wait-on": "7.2.0"
   },
   "pnpm": {

package.json

@@ -34,7 +34,6 @@
     "build:dts": "tsc --build tsconfig.build.json && rollup -c",
     "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
     "lint:tsc": "tsc",
-    "test": "jest",
     "analyze": "pnpm dlx source-map-explorer dist/index.js --no-border-checks",
     "prepack": "dot-json package.json -d type",
     "sync-version": "dot-json ../../package.json version | xargs dot-json package.json version"
@@ -85,15 +84,15 @@
     "dot-json": "1.3.0",
     "eslint": "8.56.0",
     "eslint-config-galex": "4.5.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jsdom": "23.2.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",
     "rollup": "4.9.0",
     "rollup-plugin-dts": "6.1.0",
     "typescript": "5.0.4",
-    "vite": "5.0.9"
+    "vite": "5.0.9",
+    "vitest": "1.1.3"
   }
 }

packages/app/jest.config.js

@@ -1,12 +1,8 @@
 import { screen, within } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
-import {
-  getSelectedVisTab,
-  getVisTabs,
-  renderApp,
-  waitForAllLoaders,
-} from '../test-utils';
+import { getSelectedVisTab, getVisTabs, renderApp } from '../test-utils';
 import { Vis } from '../vis-packs/core/visualizations';
 
 test('visualize raw dataset', async () => {
@@ -75,12 +71,7 @@ test('visualize 2D boolean dataset', async () => {
 });
 
 test('visualize 2D complex dataset', async () => {
-  const { user } = await renderApp({
-    initialPath: '/nD_datasets/twoD_cplx',
-    withFakeTimers: true, // required since React 18 upgrade (along with `waitForAllLoaders` below)
-  });
-
-  await waitForAllLoaders();
+  const { user } = await renderApp('/nD_datasets/twoD_cplx');
 
   expect(getVisTabs()).toEqual([Vis.Matrix, Vis.Line, Vis.Heatmap]);
   expect(getSelectedVisTab()).toBe(Vis.Heatmap);

packages/app/package.json

@@ -1,4 +1,5 @@
-import { screen, waitFor, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
 
 import { renderApp, waitForAllLoaders } from '../test-utils';
 import { Vis } from '../vis-packs/core/visualizations';
@@ -29,7 +30,7 @@ test('control mapping for X axis when visualizing 2D dataset as Line', async ()
 
   // Change mapping from [0, 'x'] to ['x', 0]
   await user.click(xDimsButtons[0]);
-  await waitFor(() => expect(xDimsButtons[0]).toBeChecked());
+  await vi.waitFor(() => expect(xDimsButtons[0]).toBeChecked());
   expect(xDimsButtons[1]).not.toBeChecked();
 
   // Ensure that the dimension slider is now for D1
@@ -62,7 +63,7 @@ test('control mapping for X and Y axes when visualizing 2D dataset as Heatmap',
 
   // Change mapping from ['y', 'x'] to ['x', 'y']
   await user.click(xD0Button);
-  await waitFor(() => expect(xD0Button).toBeChecked());
+  await vi.waitFor(() => expect(xD0Button).toBeChecked());
   expect(xD1Button).not.toBeChecked();
   expect(yD0Button).not.toBeChecked();
   expect(yD1Button).toBeChecked();

packages/app/src/__tests__/CorePack.test.tsx

@@ -1,4 +1,5 @@
 import { screen, within } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { renderApp } from '../test-utils';
 

packages/app/src/__tests__/DimensionMapper.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
 import { renderApp } from '../test-utils';

packages/app/src/__tests__/DomainWidget.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { renderApp } from '../test-utils';
 

packages/app/src/__tests__/Explorer.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
 import {

packages/app/src/__tests__/MetadataViewer.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { getSelectedVisTab, renderApp } from '../test-utils';
 import { Vis } from '../vis-packs/core/visualizations';

packages/app/src/__tests__/NexusPack.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
 
 import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
 import { mockConsoleMethod, renderApp } from '../test-utils';

packages/app/src/__tests__/VisSelector.test.tsx

@@ -2,7 +2,13 @@ import { isGroup } from '@h5web/shared/guards';
 import type { ChildEntity } from '@h5web/shared/hdf5-models';
 import { useToggle } from '@react-hookz/web';
 import type { CSSProperties, KeyboardEvent } from 'react';
-import { Suspense, useCallback, useEffect, useRef } from 'react';
+import {
+  Suspense,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FiRefreshCw } from 'react-icons/fi';
 
@@ -32,17 +38,20 @@ function EntityItem(props: Props) {
 
   const btnRef = useRef<HTMLButtonElement>(null);
 
-  const [isExpanded, toggleExpanded] = useToggle(false);
+  // Group AND (selected OR parent of selected entity)
+  const shouldBeExpanded =
+    isGroup(entity) &&
+    (selectedPath === path || selectedPath.startsWith(`${path}/`));
 
-  useEffect(() => {
-    if (
-      isGroup(entity) &&
-      (selectedPath === path || selectedPath.startsWith(`${path}/`))
-    ) {
-      // If group is selected or is parent of selected entity, expand it
+  const [isExpanded, toggleExpanded] = useToggle(shouldBeExpanded);
+
+  useLayoutEffect(() => {
+    if (shouldBeExpanded) {
+      // Expand group if needed, notably when selected path changes
+      // e.g. when navigating via NX attributes
       toggleExpanded(true);
     }
-  }, [entity, path, selectedPath, toggleExpanded]);
+  }, [shouldBeExpanded, toggleExpanded]);
 
   // When tabbing in, restore focus on the selected element
   useEffect(() => {

packages/app/src/__tests__/Visualizer.test.tsx

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

packages/app/src/explorer/EntityItem.tsx

@@ -9,6 +9,7 @@ import {
   uintType,
   unknownType,
 } from '@h5web/shared/hdf5-utils';
+import { describe, expect, it } from 'vitest';
 
 import { convertH5GroveDtype } from './utils';
 

packages/app/src/metadata-viewer/utils.test.ts

@@ -11,6 +11,7 @@ import {
   uintType,
   unknownType,
 } from '@h5web/shared/hdf5-utils';
+import { describe, expect, it } from 'vitest';
 
 import type {
   HsdsArrayType,

packages/app/src/providers/h5grove/utils.test.ts

@@ -1,4 +1,5 @@
 import { group, scalar } from '@h5web/shared/mock-utils';
+import { describe, expect, it } from 'vitest';
 
 import { findMockEntity } from './utils';