Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
testing ruleP2stack specificStack: typescript
testingvitestbrowser-modehappy-domjsdom
Write component and client-side tests in Browser Mode, not happy-dom/jsdom
Test components and client-side code in a real browser (Vitest Browser Mode via Playwright) rather than a simulated DOM (happy-dom/jsdom). Simulated environments miss real layout, events, and browser behaviour; treat existing happy-dom component tests as legacy to phase out.
PR: silvenon PR review FCK-3150Created: Jul 10, 2026
Bad example
Old codetsx
| 1 | // Button.spec.tsx (happy-dom) |
| 2 | import { render, screen } from '@testing-library/react'; |
| 3 | render(<Button />); |
| 4 | expect(screen.getByRole('button')).toBeInTheDocument(); |
Explanation (EN)
Runs in a simulated DOM that doesn't reflect real browser layout or behaviour.
Objašnjenje (HR)
Good example
New codetsx
| 1 | // Button.browser.spec.tsx (Browser Mode) |
| 2 | import { page } from 'vitest/browser'; |
| 3 | await page.render(<Button />); |
| 4 | await expect.element(page.getByRole('button')).toBeVisible(); |
Explanation (EN)
Runs in a real browser via Playwright, using retryable page locators and element assertions.
Objašnjenje (HR)
Notes (EN)
Name Browser Mode files *.browser.spec.tsx and use page.render + page.getBy* locators + await expect.element(...).