React Testing Library + konfiguration av Vitest/Jest
Installera och konfigurera Vitest/Jest med React Testing Library. Använd jsdom, rendera komponenter och fråga DOM:en som en användare.
React Testing Library + konfiguration av Vitest/Jest är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför denna stack
Mål: Testa komponenter på det sätt som en användare interagerar med dem.
- Vitest/Jest-runner
- jsdom-miljö
- React Testing Library (RTL)
Installation och miljö
Installation:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Ställ in testmiljön till jsdom
- Lägg till skripten: test, test:watch
Demokomponent att testa
Den här lilla komponenten exponerar tydlig roll, namn och tillstånd så att tester kan hitta den.
<div id="root"></div>
Förhandsvisning: testfilens innehåll
Förhandsvisning av ett test med RTL + Vitest. Filens innehåll visas som referens.
<div id="root"></div>
Viktiga konfigurationsdelar
- Miljö: jsdom
- Konfiguration: lägg till @testing-library/jest-dom om så önskas
- Skript: "test", "test:watch"
Fråga som en användare
Rekommenderade frågor:
- getByRole / findByRole
- getByLabelText
- getByText
Använd test IDs endast när ingen tillgänglig fråga passar.
Kontroll av riktlinjer för RTL-frågor
Sammanfattning
Sammanfattning: Installera Vitest/Jest + RTL, ställ in jsdom, rendera komponenter och föredra frågor baserade på roll eller etikett. Lägg till user-event för realistiska interaktioner.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”React Testing Library + konfiguration av Vitest/Jest” gratis?
Ja – hela texten till ”React Testing Library + konfiguration av Vitest/Jest” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”React Testing Library + konfiguration av Vitest/Jest”?
Installera och konfigurera Vitest/Jest med React Testing Library. Använd jsdom, rendera komponenter och fråga DOM:en som en användare. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”React Testing Library + konfiguration av Vitest/Jest”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React Testing Library + konfiguration av Vitest/Jest
- Frågor, händelser och påståenden — formulär och asynkront gränssnitt
- Mockning av fetch och timers