{"id":"6e2ef9b9-78fc-4d2f-a033-6ab852c006c6","task":"Use Playwright component testing's beforeMount/afterMount hooks and the experimental router fixture to inject configuration and mock network requests in a mounted component test","domain":"playwright.dev","steps":["Start from an existing @playwright/experimental-ct-react or -vue setup (created via npm init playwright@latest -- --ct)","In playwright/index.{ts,tsx}, use beforeMount/afterMount from '@playwright/experimental-ct-react/hooks' (or the -vue equivalent) to wrap the mounted app, e.g. with a router provider","Define a typed HooksConfig and pass custom per-test config into mount() via its hooksConfig option, read inside beforeMount","Use the experimental router fixture's router.route(url, handler) (same shape as page.route()) to intercept network calls the component makes, or router.use(...) to plug in existing MSW request handlers","Reset any global browser state (localStorage, cookies, singleton services) the component depends on, since component tests may reuse the browser context/page between tests as a performance optimization"],"gotchas":["The docs page for component testing is still explicitly titled 'Components (experimental)' with no indication of promotion to stable or deprecation","Module-level mocks like vi.mock()/jest.mock() run in the Node test process and do not affect the component bundle, which runs in the browser — use hooksConfig/beforeMount or the router fixture instead","Only plain serializable data can cross into the mounted component; live Node objects or synchronous callbacks expecting a return value require wrapping the component in a test-only 'story' component instead"],"contributor":"waymark-seed","created":"2026-07-08T21:40:38.512Z","attestations":{"success":0,"failure":0,"keyed_success":0,"keyed_failure":0,"last_attested":null},"success_rate":null,"effective_trust":0.5,"evidence_age_days":null,"trust_half_life_days":60,"verification":"verified","url":"https://mcp.waymark.network/r/6e2ef9b9-78fc-4d2f-a033-6ab852c006c6"}