React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Visuell testing lokalt

Alle Storybook-stories kan kjøres som visuelle regresjonstester (screenshot-tester) lokalt via Vitest sin browser mode, med Playwright/Chromium.

Kommandoene under kjøres med pnpm --filter @kv-designsystem/react exec ..., slik at de fungerer fra roten av monorepoet uten å måtte cd inn i @kv-designsystem/react først. Står du allerede inne i @kv-designsystem/react, kan du droppe --filter @kv-designsystem/react exec-delen og bare skrive pnpm vitest ... direkte.

Forutsetning: Playwright må ha lastet ned en Chromium-instans. Hvis det ikke allerede er gjort:

pnpm --filter @kv-designsystem/react exec playwright install chromium

Kjøre testene:

pnpm --filter @kv-designsystem/react exec vitest run --project storybook

Første gang du kjører en story finnes det ingen referanse-screenshot ennå. Vitest oppretter da et nytt bilde under src/**/__screenshots__/ og lar testen feile, slik at du får sjekket bildet før det brukes som fasit. Se over det genererte bildet, og kjør testen på nytt — da sammenlignes et nytt bilde mot referansen (pikseldiff).

Med interaktivt UI: legg til --ui-flagget (og drop run, siden --ui alltid kjører i watch-modus). Åpner en nettleserfane (typisk http://localhost:51204/__vitest__/) hvor du ser testresultater fortløpende, og — ved en feilet skjermbilde-test — får en egen "Attachments"-fane med actual- og diff-bildet side om side:

pnpm --filter @kv-designsystem/react exec vitest --project storybook --ui

Skal du bare følge med på én komponent under utvikling, filtrer på filnavn (fungerer med og uten --ui):

pnpm --filter @kv-designsystem/react exec vitest --project storybook --ui Button

Oppdatere en referanse etter en tilsiktet visuell endring: kjør testen med -u-flagget (Vitest sin vanlige snapshot-oppdatering), så overskrives referansebildet automatisk i stedet for å feile:

pnpm --filter @kv-designsystem/react exec vitest run --project storybook -u

Merk: Disse referanse-screenshotene er gitignored og skal ikke committes. Ordentlig visuell regresjonstesting på tvers av maskiner/nettlesere håndteres av Chromatic i CI (se .github/workflows/publish-chromatic.yml). Bruk de lokale screenshot-testene som en rask sjekk før du pusher.