component-fixtures

Create a file ending in .fixture.ts under src/vs/workbench/test/browser/componentFixtures that exports a default defineThemedFixtureGroup. Each entry uses defineComponentFixture with a render function that builds the widget via createEditorServices and appends its domNode to the container.

Start the Component Explorer Server task, then use the mcp_component-exp_list_fixtures tool to see available fixtures and mcp_component-exp_screenshot to capture images. The dev server auto-discovers fixtures via the glob src/**/*.fixture.ts.

Fixtures render in shadow DOM, so production selectors scoped to deep ancestors like .workbench .sidebar .my-view will not match. Recreate the expected ancestor DOM structure in the fixture, or refactor the component CSS to use self-contained class selectors.

Pass an additionalServices callback to createEditorServices and register implementations with reg.define or pre-built instances with reg.defineInstance. Use the mock<T>() helper from base/test/common/mock.js to create stub service instances with overridden methods.

Flickering usually comes from reparenting widgets in the DOM after an async wait, which triggers layout recalculation and focus loss. Build the final DOM structure synchronously up front and let the component explorer wait for the returned promise or two animation frames.