component-fixtures

Create a file ending in .fixture.ts under src/vs/workbench/test/browser/componentFixtures/ that exports a default defineThemedFixtureGroup. Each variant uses defineComponentFixture with a render function, and the Vite dev server auto-discovers it via the src/**/*.fixture.ts glob.

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 screenshots. The explorer waits two animation frames, or for your render promise to resolve.

Flickering usually comes from reparenting DOM nodes after async waits, which recalculates layout and breaks absolute positioning. Render the widget in-place with the correct DOM structure from the start instead of moving it between parents.

Use createEditorServices with an additionalServices callback to register implementations or instances, and build mocks with the mock<T>() helper from base/test/common/mock.js. Pre-registered services include IThemeService, IConfigurationService, and IStorageService.

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

No. Always adapt the original component to be fixture-friendly, for example by injecting services, exposing a domNode, or adding a shouldAutoFocus option. Copying hides integration bugs and stops testing the real component lifecycle.