Upgrade React ecosystem to v19, migrate snapshot tests to @testing-library/react

[dependabot]

The react-test-renderer@19 peer dependency conflict with react@18 caused CI failures. Rather than pin to v18, this rolls the full React ecosystem to v19 and replaces the deprecated (broken in v19) react-test-renderer with @testing-library/react.

Dependency changes

• react, react-dom → ^19.2.4; @types/react → ^19.2.14, @types/react-dom → ^19.2.3
• Removed react-test-renderer + @types/react-test-renderer (toJSON() returns null in React 19)
• Added @testing-library/react@^16.3.2, @testing-library/jest-dom@^6.9.1

React 19 breaking change fixes

• VFC removed — replaced with FC in App.tsx, StatusBar.tsx, Tooltip.tsx
• useRef<T>() → useRef<T | undefined>(undefined) (explicit initial value now required)
• RefObject<HTMLDivElement> → RefObject<HTMLDivElement | null>; return type MutableRefObject → RefObject in useCytoscape.ts

Test infrastructure

• Snapshot tests migrated to @testing-library/react using asFragment() — snapshots now contain real DocumentFragment HTML
• Added setup.ts with a canvas 2d context mock (jsdom doesn't implement HTMLCanvasElement.getContext)
• Added cytoscapeMock.ts via moduleNameMapper; variable renamed to cytoscapeMock to avoid TS2451 redeclaration conflict with the @types/cytoscape global (tsconfig includes all of src/)
• Fixed vscode.ts mock: was exporting a factory function instead of the API object

[microsoft-github-policy-service]

[github-actions]

Test this change out locally with the following install scripts (Action run 24255729136)

VSCode

• Mac/Linux

  bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 24255729136

• Windows

  iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 24255729136"

Azure CLI

• Mac/Linux

  bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 24255729136

• Windows

  iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 24255729136"

[brendandburns]

@copilot please fix failing tests

[Copilot]

@copilot please fix failing tests

The issue was that react-test-renderer@19.2.4 requires react@^19 as a peer dependency, but the project uses react@18.3.1. This caused npm ci to fail with a peer dependency conflict.

Fixed in commit a41b8a5 by reverting react-test-renderer back to ^18.3.1 and @types/react-test-renderer back to ^18.3.0 to match the installed React 18 version. All snapshot tests now pass.

[brendandburns]

@copilot Instead of reverting to v18, can you roll both forward to v19?

[Copilot]

@copilot Instead of reverting to v18, can you roll both forward to v19?

Done in commit 1a4c8d3. The full React ecosystem is now on v19 (react, react-dom, @types/react, @types/react-dom all at ^19.x).

Since react-test-renderer is deprecated and broken in React 19 (it returns null for all renders), I migrated the snapshot tests to @testing-library/react instead. The snapshots now contain real component HTML content. Additionally fixed the React 19 breaking changes (VFC → FC, useRef requiring an explicit initial value, RefObject type narrowing).

All 2 snapshot tests and 38 unit tests pass.

[brendandburns]

@copilot please fix CI/CD

[Copilot]

@copilot please fix CI/CD

Fixed in commit 8e6607f. The CI failure was TS2451: Cannot redeclare block-scoped variable 'cytoscape' in cytoscapeMock.ts — the local variable named cytoscape conflicted with the global cytoscape type from @types/cytoscape since tsconfig includes all files under src/. Renamed it to cytoscapeMock to resolve the collision.

[shenglol]

@brendandburns - For context, the latest release introduced a new experimental visualizer (with its source in vscode-bicep-ui). The old visualizer will be removed and replaced after two release cycles, and vscode-bicep will no longer contain any React code. Given that, upgrading may not be worthwhile - but it’s up to you whether to proceed or abandon the PR. I’m also fine merging it, since it doesn’t cause any harm.

[brendandburns]

@copilot please fix conflicts in package lock file.

[Copilot]

@copilot please fix conflicts in package lock file.

Fixed in commit 02b4050. Merged origin/main into the branch and regenerated package-lock.json from the merged package.json. The lock file now incorporates both our React v19 changes and all upstream bumps from main (@azure/arm-subscriptions@^6, @azure/identity@^4.13, eslint@^10, @eslint-react/eslint-plugin@^4, etc.).

[brendandburns]

Please fix linter errors.

[brendandburns]

@copilot please fix linter errors.

[Copilot]

@copilot please fix linter errors.

Fixed in commit b14ee15. The lint error was @eslint-react/no-unnecessary-use-prefix on __mocks__/useCytoscape.ts — the mock file was never wired up (no moduleNameMapper entry or jest.mock() call), so the real hook ran during tests. Deleted the dead file; lint now passes clean with --max-warnings 0 and all snapshot tests still pass.