React test helper: setupReactRenderer() (#12083)

Adds shared React test infrastructure and an ESLint rule to enforce
correct usage. Related to #10000.

- New `setupReactRenderer()` helper manages the React root lifecycle via
mocha `setup`/`teardown` hooks.
- New ESLint rule to enforce that `setupReactRenderer()` is called
before `ensureNoDisposablesAreLeakedInTestSuite()` in test suites. Mocha
teardown is FIFO, so the React teardown must unmount components (and
cleanup effects which often cleans up disposables) before the leak
checker inspects disposables.
- Updated Claude rules given above
- Added `PositronFindWidget` tests and refactored action bar widget and
column summary cell tests to test everything out

### Release Notes

#### New Features
- N/A

#### Bug Fixes
- N/A

### QA Notes

No user-facing changes. All changes are to test infrastructure and
developer tooling.

---------

Signed-off-by: Wasim Lorgat <mwlorgat@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Dhruvi Sompura <dhruvi.sompura@posit.co>

Author: 3 people

.claude/rules/core-tests.md

@@ -18,13 +18,18 @@ disposables.add(someDisposable);
 
 ## Services (prefer in this order)
 
-1. Real services directly (e.g. `new RuntimeStartupService(...)`).
-2. Existing `Test*` service classes - search from `src/vs/workbench/test/browser/positronWorkbenchTestServices.ts`.
-3. For many dependencies, use `positronWorkbenchInstantiationService`.
+1. `{} as T` for services the code under test doesn't call (e.g. dependencies it only passes through to collaborators).
+2. Real services directly (e.g. `new RuntimeStartupService(...)`).
+3. Existing `Test*` service classes - search from `src/vs/workbench/test/browser/positronWorkbenchTestServices.ts`.
+4. For many dependencies, use `positronWorkbenchInstantiationService`.
+
+## Structure
+
+- Group related tests with nested `suite()` calls, not comment headers like `// --- Section ---`.
 
 ## Mocking
 
-- Use `Partial<T>` with only the members your test needs, cast with `as T`.
+- Use `Partial<T>` with only the members your test needs, cast with `as T`. This might trigger `local/code-no-dangerous-type-assertions`; add `/* eslint-disable local/code-no-dangerous-type-assertions */` below the copyright header.
 - For reusable mocks, create a test helper class implementing `Partial<T>`.
 
 ## Sinon

.claude/rules/react-tests.md

@@ -5,12 +5,14 @@ paths:
 
 # React Tests
 
-React component tests run in Electron (not browser). No React testing libraries are available - only `assert`, `sinon`, `react-dom`, and `react-dom/client`.
+React component tests run in Electron with `assert`, `sinon`, and `react-dom`. No React testing libraries (Testing Library, Enzyme, etc.) are available.
 
-## Constraints
+## Setup
 
-- Place tests in `test/browser/` adjacent to source: `feature/browser/components/foo.tsx` -> `feature/test/browser/foo.test.tsx`
-- Use `mainWindow.document` instead of `document` for DOM operations.
-- `querySelector` requires `/* eslint-disable no-restricted-syntax */` below the copyright header.
-- Render via a helper that wraps `root.render()` in `flushSync()` so React flushes synchronously.
-- Teardown order matters: (1) `root.unmount()`, (2) `container.remove()`, (3) `sinon.restore()`.
+Use `setupReactRenderer()` from `base/test/browser/react.js` to manage the DOM container and React root. Call it **before** `ensureNoDisposablesAreLeakedInTestSuite()` -- mocha teardown is FIFO, so React must unmount before the leak checker runs.
+
+## General
+
+- Place tests in `test/browser/` adjacent to source.
+- `render()` returns the DOM container -- query it for assertions.
+- `querySelector<T>` requires `/* eslint-disable no-restricted-syntax */` below the copyright header.

.eslint-plugin-local/code-setup-react-renderer-before-disposables-check.ts

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2026 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as eslint from 'eslint';
+import type * as estree from 'estree';
+import { TSESTree } from '@typescript-eslint/utils';
+
+export default new class SetupReactRendererBeforeDisposablesCheck implements eslint.Rule.RuleModule {
+
+	readonly meta: eslint.Rule.RuleMetaData = {
+		type: 'problem',
+		messages: {
+			order: '`setupReactRenderer()` must be called before `ensureNoDisposablesAreLeakedInTestSuite()`. ' +
+				'Mocha runs teardown hooks in FIFO order, so the React teardown must register first to unmount ' +
+				'components and dispose VS Code disposables before the leak checker inspects them.',
+		},
+		schema: false,
+	};
+
+	create(context: eslint.Rule.RuleContext): eslint.Rule.RuleListener {
+		return {
+			// Match setupReactRenderer() as a direct statement (expression or variable declaration) inside a suite callback.
+			['CallExpression[callee.name="suite"] > :function > BlockStatement > :matches(ExpressionStatement, VariableDeclaration) CallExpression[callee.name="setupReactRenderer"]']: (node: estree.CallExpression) => {
+				// Walk up to the BlockStatement to find sibling statements.
+				let stmt = node as TSESTree.Node;
+				while (stmt.parent && stmt.parent.type !== 'BlockStatement') {
+					stmt = stmt.parent;
+				}
+				const block = stmt.parent as TSESTree.BlockStatement;
+				const setupIdx = block.body.indexOf(stmt as TSESTree.Statement);
+
+				// Scan backward: if ensureNoDisposablesAreLeakedInTestSuite appears earlier, report it.
+				for (let i = setupIdx - 1; i >= 0; i--) {
+					if (isCallInStatement(block.body[i], 'ensureNoDisposablesAreLeakedInTestSuite')) {
+						context.report({ node: block.body[i] as estree.Node, messageId: 'order' });
+						return;
+					}
+				}
+			},
+		};
+	}
+};
+
+/** Check whether a statement contains a call to the given function name. */
+function isCallInStatement(node: TSESTree.Statement, name: string): boolean {
+	if (node.type === 'ExpressionStatement') {
+		return isCallTo(node.expression, name);
+	}
+	if (node.type === 'VariableDeclaration') {
+		return node.declarations.some(d => d.init && isCallTo(d.init, name));
+	}
+	return false;
+}
+
+function isCallTo(node: TSESTree.Expression, name: string): boolean {
+	return node.type === 'CallExpression'
+		&& node.callee.type === 'Identifier'
+		&& node.callee.name === name;
+}

.eslint-plugin-local/tests/code-setup-react-renderer-before-disposables-check-test.tsx

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2026 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// Test file to verify the code-setup-react-renderer-before-disposables-check ESLint rule.
+
+import { setupReactRenderer } from '../../src/vs/base/test/browser/react.js';
+import { ensureNoDisposablesAreLeakedInTestSuite } from '../../src/vs/base/test/common/utils.js';
+
+// -----
+// Valid
+// -----
+
+suite('correct order - destructured', () => {
+	const { render } = setupReactRenderer();
+	ensureNoDisposablesAreLeakedInTestSuite();
+});
+
+suite('correct order - expression statement', () => {
+	setupReactRenderer();
+	ensureNoDisposablesAreLeakedInTestSuite();
+});
+
+suite('correct order - ensureNoDisposables assigned to variable', () => {
+	setupReactRenderer();
+	const disposables = ensureNoDisposablesAreLeakedInTestSuite();
+});
+
+suite('only setupReactRenderer - no ensureNoDisposables', () => {
+	setupReactRenderer();
+});
+
+suite('only ensureNoDisposables - no setupReactRenderer', () => {
+	ensureNoDisposablesAreLeakedInTestSuite();
+});
+
+suite('neither function present', () => {
+});
+
+// -------
+// Invalid
+// -------
+
+suite('wrong order - destructured', () => {
+	// eslint-disable-next-line local/code-setup-react-renderer-before-disposables-check
+	ensureNoDisposablesAreLeakedInTestSuite();
+	const { render } = setupReactRenderer();
+});
+
+suite('wrong order - expression statement', () => {
+	// eslint-disable-next-line local/code-setup-react-renderer-before-disposables-check
+	ensureNoDisposablesAreLeakedInTestSuite();
+	setupReactRenderer();
+});
+
+suite('wrong order - ensureNoDisposables assigned to variable', () => {
+	// eslint-disable-next-line local/code-setup-react-renderer-before-disposables-check
+	const disposables = ensureNoDisposablesAreLeakedInTestSuite();
+	setupReactRenderer();
+});

eslint.config.js

@@ -176,6 +176,16 @@ export default tseslint.config(
 			'jsx-a11y/no-static-element-interactions': 'error',
 		},
 	},
+	// React Tests
+	{
+		files: [
+			'src/vs/**/*.test.tsx',
+			'.eslint-plugin-local/**/*.tsx',
+		],
+		rules: {
+			'local/code-setup-react-renderer-before-disposables-check': 'error',
+		}
+	},
 	// --- End Positron ---
 	// TS
 	{

src/vs/base/test/browser/react.tsx

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2026 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ReactElement } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
+import { mainWindow } from '../../browser/window.js';
+
+/**
+ * Sets up a React render root for component tests. Registers mocha `setup` and
+ * `teardown` hooks that create/destroy the DOM container and React root.
+ *
+ * Must be called before `ensureNoDisposablesAreLeakedInTestSuite()` because
+ * mocha runs teardown hooks in FIFO order. The React teardown must run first so
+ * that deferred `useEffect` cleanups dispose VS Code disposables before the leak
+ * checker inspects them.
+ *
+ * @example
+ * ```ts
+ * suite('MyWidget', () => {
+ *     const { render } = setupReactRenderer();
+ *     ensureNoDisposablesAreLeakedInTestSuite();
+ *
+ *     test('renders', () => {
+ *         const container = render(<MyWidget />);
+ *         assert.ok(container.querySelector('.my-widget'));
+ *     });
+ * });
+ * ```
+ */
+export function setupReactRenderer() {
+	let root: Root;
+	let el: HTMLElement;
+
+	setup(() => {
+		el = mainWindow.document.createElement('div');
+		mainWindow.document.body.appendChild(el);
+		root = createRoot(el);
+	});
+
+	teardown(async () => {
+		root.unmount();
+		el.remove();
+	});
+
+	return {
+		/**
+		 * Render a React element synchronously via `flushSync` and return the
+		 * DOM container the React root is mounted into.
+		 */
+		render(element: ReactElement): HTMLElement {
+			if (root === undefined) {
+				throw new Error('React root is not initialized. Did you try to render before setup?');
+			}
+			flushSync(() => {
+				root.render(element);
+			});
+			return el;
+		},
+	};
+}