component-fixtures

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

Use createEditorServices with an additionalServices callback to register implementations or instances via reg.define and reg.defineInstance. For mocks, extend the mock<T>() helper from base/test/common/mock.js and override the methods your component calls.

Flickering usually comes from reparenting DOM nodes after async waits, which triggers layout recalculation and focus loss. Render the widget in-place with the correct DOM structure from the start, and disable auto-focus via component options.

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

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 them. defineThemedFixtureGroup automatically produces Dark and Light variants of each fixture.