chore(jaeger-ui): replace require() in test bodies with static imports (#3692)

Replace require() calls in test body scope with static ES imports (H2a,
ADR-0007). require() is unavailable in Vitest's native ESM test scope;
static imports work in both Jest and Vitest.

Changes across 9 files:
- Move require() to top-level import statements
- Add namespace imports for jest.spyOn targets (TracePage)
- Consolidate require('react') in mock factory to { forwardRef }
- Move misplaced imports above jest.mock() (PlexusDemo, TraceFlamegraph)

Three files excluded (need vi.resetModules + await import in H3):
- utils/prefix-url.test.js
- utils/tracking/ga-coverage.test.js
- prefix-url-coverage.test.js

## AI Usage in this PR (choose one)
See [AI Usage
Policy](https://github.com/jaegertracing/jaeger/blob/main/CONTRIBUTING_GUIDELINES.md#ai-usage-policy).
- [ ] **None**: No AI tools were used in creating this PR
- [ ] **Light**: AI provided minor assistance (formatting, simple
suggestions)
- [ ] **Moderate**: AI helped with code generation or debugging specific
parts
- [x] **Heavy**: AI generated most or all of the code changes

---------

Signed-off-by: Yuri Shkuro <github@ysh.us>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yurishkuro

docs/adr/0007-vite-plus-migration.md

@@ -364,10 +364,16 @@ so each is reviewable in isolation and CI catches regressions early.
 121 of the 207 test files contained JSX but had a `.js` extension. Vite/esbuild does not parse JSX in
 `.js` files, so these must be renamed before the Vitest switch. Pure `git mv` with zero logic changes.
 
-#### PR H2a — Replace `require()` in test bodies with static `import` (~12 files)
+#### ✅ PR H2a — Replace `require()` in test bodies with static `import` ([#3692](https://github.com/jaegertracing/jaeger-ui/pull/3692))
 
-`require()` is unavailable in Vitest's native ESM test scope. Moving these to top-level `import`
-statements is valid under Jest (Babel transpiles them to CJS) and necessary for Vitest.
+`require()` is unavailable in Vitest's native ESM test scope. Converted 9 files.
+
+Three files were **excluded** — they use `require()` after `jest.resetModules()` or inside runtime
+`jest.mock()` calls within `it` blocks (not hoisted). These use a module re-isolation pattern that
+requires `vi.resetModules()` + `await import()` and will be handled in H3:
+- `utils/prefix-url.test.js`
+- `utils/tracking/ga-coverage.test.js`
+- `prefix-url-coverage.test.js`
 
 #### PR H2b — Replace arrow function constructors with regular functions (~16 files)
 
@@ -585,7 +591,7 @@ confirm no errors or unexpected HTML injection.
 | ✅ E  | Consolidate `jaeger-ui` tsconfigs; remove `main` from plexus package.json ([#3689](https://github.com/jaegertracing/jaeger-ui/pull/3689)) | Unknown 1 | Done |
 | 🔶 F | Migrate Jest → Vitest in both packages; remove Babel test deps ([#3690](https://github.com/jaegertracing/jaeger-ui/pull/3690) plexus ✅, jaeger-ui pending) | Unknowns 3, 4, 5, 6 | Partial |
 | ✅ H1 | Rename `.test.js` → `.test.jsx` in jaeger-ui (121 files, pure rename) ([#3691](https://github.com/jaegertracing/jaeger-ui/pull/3691)) | None | Done |
-| H2a | Replace `require()` in test bodies with static `import` (~12 files) | None | After H1 |
+| ✅ H2a | Replace `require()` in test bodies with static `import` ([#3692](https://github.com/jaegertracing/jaeger-ui/pull/3692)) | None | Done |
 | H2b | Replace arrow function constructors with regular functions (~16 files) | None | After H1 |
 | H2c | Introduce `mockDefault` helper in affected mock factories | None | After H1 |
 | H3 | Vitest switch for jaeger-ui | Unknowns 3, 4, 5, 6 | After H2a–c |

packages/jaeger-ui/src/components/DeepDependencies/index.test.jsx

@@ -5,6 +5,10 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import _set from 'lodash/set';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 jest.mock('node-fetch', () =>
   jest.fn(() =>
@@ -980,14 +984,6 @@ describe('DeepDependencyGraphPage', () => {
   });
 
   describe('DeepDependencyGraphPage (default export wrapper)', () => {
-    const { MemoryRouter } = require('react-router-dom');
-
-    const { Provider } = require('react-redux');
-
-    const { createStore } = require('redux');
-
-    const { QueryClient, QueryClientProvider } = require('@tanstack/react-query');
-
     const mockReduxStore = createStore(() => ({
       ddg: {},
       router: { location: { search: '?service=test-service' } },

packages/jaeger-ui/src/components/Monitor/index.test.jsx

@@ -11,6 +11,7 @@ import store from '../../utils/storage';
 import MonitorATMPage from '.';
 import metricsReducer from '../../reducers/metrics';
 import * as jaegerApiActions from '../../actions/jaeger-api';
+import getConfig from '../../utils/config/get-config';
 
 // --- Mock Modules ---
 // Mock the actions module
@@ -128,7 +129,6 @@ describe('<MonitorATMPage>', () => {
   });
 
   it('renders EmptyState when metricsStorage is disabled in config', () => {
-    const getConfig = require('../../utils/config/get-config').default;
     getConfig.mockImplementation(() => ({
       qualityMetrics: { apiEndpoint: '/api/quality-metrics' },
       storageCapabilities: { metricsStorage: false },

packages/jaeger-ui/src/components/PlexusDemo/index.test.jsx

@@ -4,11 +4,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import PlexusDemo from './index';
 
 // Mock the plexus demo module so the test does not depend on the plexus
 // package build and avoids Web Worker creation in jsdom.
 // { virtual: true } is required because the module is resolved by a Vite alias
 // at build time but does not exist as a real path in node_modules.
+// Note: jest.mock() is always hoisted before imports, so the import above
+// picks up the mocked version regardless of source order.
 jest.mock(
   '@jaegertracing/plexus/demo',
   () => ({
@@ -20,9 +23,6 @@ jest.mock(
   { virtual: true }
 );
 
-// Import after the mock is registered.
-const { default: PlexusDemo } = require('./index');
-
 describe('PlexusDemo', () => {
   it('renders without crashing', () => {
     expect(() => render(<PlexusDemo />)).not.toThrow();

packages/jaeger-ui/src/components/SearchTracePage/SearchForm.test.jsx

@@ -61,6 +61,7 @@ import {
 } from './SearchForm';
 import * as markers from './SearchForm.markers';
 import { CHANGE_SERVICE_ACTION_TYPE } from '../../constants/search-form';
+import { useServices, useSpanNames } from '../../hooks/useTraceDiscovery';
 
 function makeDateParams(dateOffset = 0) {
   const date = new Date();
@@ -580,8 +581,6 @@ describe('<SearchForm>', () => {
   });
 
   describe('error handling', () => {
-    const { useServices, useSpanNames } = require('../../hooks/useTraceDiscovery');
-
     afterEach(() => {
       jest.clearAllMocks();
     });

packages/jaeger-ui/src/components/SearchTracePage/index.test.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
+import { createStore } from 'redux';
 import { SearchTracePageImpl as SearchTracePage, mapStateToProps } from './index';
 import { fetchedState } from '../../constants';
 import traceGenerator from '../../demo/trace-generators';
@@ -227,7 +228,7 @@ describe('<SearchTracePage>', () => {
 
   it('hides Upload tab if it is disabled via config', () => {
     // Create a custom store with disableFileUploadControl: true
-    const customStore = require('redux').createStore(() => ({
+    const customStore = createStore(() => ({
       ...globalStore.getState(),
       config: {
         ...globalStore.getState().config,

packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.test.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { convertJaegerTraceToProfile } from '@pyroscope/flamegraph';
+import { convertJaegerTraceToProfile, FlamegraphRenderer } from '@pyroscope/flamegraph';
 import TraceFlamegraph from './index';
 import testTrace from './testTrace.json';
 
@@ -22,10 +22,6 @@ jest.mock('@pyroscope/flamegraph', () => {
   };
 });
 
-// Re-import FlamegraphRenderer after mocking
-
-const { FlamegraphRenderer } = require('@pyroscope/flamegraph');
-
 const profile = convertJaegerTraceToProfile(testTrace.data);
 
 describe('convertJaegerTraceToProfile', () => {

packages/jaeger-ui/src/components/TracePage/TraceLogsView/index.test.jsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import TraceLogsView from './index';
 import transformTraceData from '../../../model/transform-trace-data';
@@ -191,7 +191,6 @@ describe('<TraceLogsView>', () => {
   });
 
   it('toggles attribute accordion open and closed on click', () => {
-    const { fireEvent } = require('@testing-library/react');
     const trace = transformTraceData(baseTrace).asOtelTrace();
     render(<TraceLogsView trace={trace} useOtelTerms={false} />);
 
@@ -254,7 +253,6 @@ describe('<TraceLogsView>', () => {
   });
 
   it('handles column sorting for service name', () => {
-    const { fireEvent } = require('@testing-library/react');
     const trace = transformTraceData(baseTrace).asOtelTrace();
     render(<TraceLogsView trace={trace} useOtelTerms={false} />);
 
@@ -264,7 +262,6 @@ describe('<TraceLogsView>', () => {
   });
 
   it('handles column sorting for operation/span name', () => {
-    const { fireEvent } = require('@testing-library/react');
     const trace = transformTraceData(baseTrace).asOtelTrace();
     render(<TraceLogsView trace={trace} useOtelTerms={false} />);
 
@@ -273,7 +270,6 @@ describe('<TraceLogsView>', () => {
   });
 
   it('handles column sorting for event/log name', () => {
-    const { fireEvent } = require('@testing-library/react');
     const trace = transformTraceData(baseTrace).asOtelTrace();
     render(<TraceLogsView trace={trace} useOtelTerms={false} />);
 

packages/jaeger-ui/src/components/TracePage/index.test.jsx

@@ -1,6 +1,36 @@
 // Copyright (c) 2017 Uber Technologies, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  computeAdjustedRange,
+  makeShortcutCallbacks,
+  mapDispatchToProps,
+  mapStateToProps,
+  shortcutConfig,
+  TracePageImpl as TracePage,
+  VIEW_MIN_RANGE,
+} from './index';
+import * as track from './index.track';
+import * as keyboardShortcutsMod from './keyboard-shortcuts';
+import { reset as resetShortcuts, merge as mergeShortcuts } from './keyboard-shortcuts';
+import * as scrollPageMod from './scroll-page';
+import { cancel as cancelScroll } from './scroll-page';
+import * as calculateTraceDagEV from './TraceGraph/calculateTraceDagEV';
+import { trackSlimHeaderToggle } from './TracePageHeader/TracePageHeader.track';
+import * as getUiFindVertexKeys from '../TraceDiff/TraceDiffGraph/traceDiffGraphUtils';
+import { fetchedState } from '../../constants';
+import traceGenerator from '../../demo/trace-generators';
+import transformTraceData from '../../model/transform-trace-data';
+import filterSpansSpy from '../../utils/filter-spans';
+import updateUiFindSpy from '../../utils/update-ui-find';
+import { ETraceViewType } from './types';
+import ScrollManager from './ScrollManager';
+
 let capturedHeaderProps = {};
 let capturedArchiveNotifierProps = {};
 
@@ -79,10 +109,10 @@ jest.mock('./ArchiveNotifier', () => props => {
 });
 
 jest.mock('./TracePageHeader', () => {
-  const React = require('react');
+  const { forwardRef } = require('react');
   return {
     __esModule: true,
-    default: React.forwardRef(function MockTracePageHeader(props, ref) {
+    default: forwardRef(function MockTracePageHeader(props, ref) {
       capturedHeaderProps = { ...props, ref };
       return (
         <div className="TracePageHeader">
@@ -94,34 +124,6 @@ jest.mock('./TracePageHeader', () => {
   };
 });
 
-import React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { MemoryRouter } from 'react-router-dom';
-
-import {
-  computeAdjustedRange,
-  makeShortcutCallbacks,
-  mapDispatchToProps,
-  mapStateToProps,
-  shortcutConfig,
-  TracePageImpl as TracePage,
-  VIEW_MIN_RANGE,
-} from './index';
-import * as track from './index.track';
-import { reset as resetShortcuts, merge as mergeShortcuts } from './keyboard-shortcuts';
-import { cancel as cancelScroll } from './scroll-page';
-import * as calculateTraceDagEV from './TraceGraph/calculateTraceDagEV';
-import { trackSlimHeaderToggle } from './TracePageHeader/TracePageHeader.track';
-import * as getUiFindVertexKeys from '../TraceDiff/TraceDiffGraph/traceDiffGraphUtils';
-import { fetchedState } from '../../constants';
-import traceGenerator from '../../demo/trace-generators';
-import transformTraceData from '../../model/transform-trace-data';
-import filterSpansSpy from '../../utils/filter-spans';
-import updateUiFindSpy from '../../utils/update-ui-find';
-import { ETraceViewType } from './types';
-import ScrollManager from './ScrollManager';
-
 const renderWithRouter = (ui, { route = '/' } = {}) => {
   return render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>);
 };
@@ -438,8 +440,8 @@ describe('<TracePage>', () => {
 
     ScrollManager.mockImplementation(() => scrollManagerMock);
 
-    const resetShortcutsMock = jest.spyOn(require('./keyboard-shortcuts'), 'reset');
-    const cancelScrollMock = jest.spyOn(require('./scroll-page'), 'cancel');
+    const resetShortcutsMock = jest.spyOn(keyboardShortcutsMod, 'reset');
+    const cancelScrollMock = jest.spyOn(scrollPageMod, 'cancel');
 
     const { unmount } = render(<TracePage {...defaultProps} />);
     unmount();