Component Fixtures
microsoft/vscodeOfficial
This handles component fixtures for visual screenshot testing in VS Code's component explorer. It walks you through the fixture file structure, how to use defineThemedFixtureGroup to auto-generate dark and light variants, and how to set up the dependency injection container with createEditorServices. The real value is in the specifics: CSS scoping gotchas when your component relies on deep ancestor selectors, how to avoid DOM reparenting that causes flicker in screenshots, and patterns for mocking services. Use it when you're building isolated UI component tests or need to make existing components fixture-friendly without breaking their production CSS.
- skills.sh installs
- 277
- GitHub stars
- 195.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add microsoft/vscode --skill component-fixtures --agent claude-codeInstalls into .claude/skills of the current project.
Files
Component Fixtures
Component fixtures render isolated UI components for visual screenshot testing via the component explorer. Fixtures live in src/vs/workbench/test/browser/componentFixtures/ and are auto-discovered by the Vite dev server using the glob src/**/*.fixture.ts.
Use tools mcp_component-exp_* to list and screenshot fixtures. If you cannot see these tools, inform the user to them on.
Running Fixtures Locally
- Start the component explorer server: run the Component Explorer Server task
- Use the
mcp_component-exp_list_fixturestool to see all available fixtures and their URLs - Use the
mcp_component-exp_screenshottool to capture screenshots programmatically
File Structure
Each fixture file exports a default defineThemedFixtureGroup(...). The file must end with .fixture.ts.
src/vs/workbench/test/browser/componentFixtures/
fixtureUtils.ts # Shared helpers (DO NOT import @vscode/component-explorer elsewhere)
myComponent.fixture.ts # Your fixture file
Basic Pattern
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/microsoft/vscode
- Categories
- Frontend Development, Testing & QA
- First seen
- Jun 3, 2026
