Jest-oppsett og grunnleggende tester
Installer Jest, skriv describe/it/expect-tester, bruk matchere som toBe og toEqual, og kjør tester i watch-modus under utviklingen.
Jest-oppsett og grunnleggende tester er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hvorfor teste frontendkode?
Tester oppdager regresjoner når du endrer kode. De dokumenterer forventet atferd. De gir deg trygghet når du refaktorerer. Uten tester er hver endring et sjansespill der noe annet kan ha blitt ødelagt.
Installere Jest
For et Vite + React-prosjekt bruker du Vitest (en Vite-nativ, Jest-kompatibel testrunner). For andre oppsett installerer du Jest med babel-jest eller ts-jest for TypeScript.
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jestNavngiving av testfiler
Plasser testfiler ved siden av kildekoden: Button.test.ts, utils.spec.ts. Du kan også bruke en __tests__/-mappe. Jest finner filer som samsvarer med *.test.* eller *.spec.*.
describe, it, expect
Strukturer tester med describe-blokker (grupper) og it/test-funksjoner (enkeltstående tester). Bruk expect til å kontrollere resultatene.
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});Vanlige matchere
Jest tilbyr mange matchere: toBe (streng likhet), toEqual (dyp likhet), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow og toBeGreaterThan.
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();Teste asynkron kode
Returner promise-et, eller bruk async/await i tester. Jest venter på at promise-et skal løses før testen markeres som ferdig.
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach og afterEach
Kjør oppsett og opprydding før og etter hver test for å holde testene isolerte.
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});Kjøre tester
npm test kjører alle tester. npm test -- --watch (Jest) eller vitest i watch-modus kjører testene på nytt når en fil endres. Vitest sitt brukergrensesnitt (vitest --ui) tilbyr en nettleserbasert testrunner.
Testdekning
jest --coverage (eller vitest run --coverage) genererer en rapport over testdekningen som viser hvilke linjer som testes. Et mål på over 70 % testdekning er vanlig i team. 100 % testdekning betyr ikke at koden er feilfri.
Skrive testbar kode
Rene funksjoner (uten bivirkninger) er svært enkle å teste. Hold funksjonene små og fokuserte. Injiser avhengigheter i stedet for å importere dem direkte – da blir det enkelt å erstatte dem med testdobler.
Testisolasjon
Hver test bør være helt uavhengig. Tester som er avhengige av hverandres bivirkninger, blir skjøre. Unngå delt, muterbar tilstand mellom tester. Tilbakestill alle mocker i afterEach.
Rask sjekk
Hvilken Jest-matcher kontrollerer dyp likhet mellom to objekter?
Oppsummering: Grunnleggende Jest
describe grupperer tester. it/test definerer enkeltstående tester. expect + matchere kontrollerer resultater. toBe brukes for primitive verdier. toEqual brukes for objekter/arrayer. Asynkrone tester bruker async/await eller returnerer promise-et. beforeEach/afterEach brukes til isolasjon. Rapporter over testdekning viser hvilke linjer som testes. Rene funksjoner er enklest å teste.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Jest-oppsett og grunnleggende tester» gratis?
Ja – hele teksten i «Jest-oppsett og grunnleggende tester» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Jest-oppsett og grunnleggende tester»?
Installer Jest, skriv describe/it/expect-tester, bruk matchere som toBe og toEqual, og kjør tester i watch-modus under utviklingen. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Jest-oppsett og grunnleggende tester»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Jest-oppsett og grunnleggende tester
- @testing-library/react: render og userEvent
- @testing-library/vue: mounte komponenter
- Mocking av moduler og API-kall