Mikrofrontendarkitektur med Module Federation · Lektion

Enhetstesta federerade komponenter

Lär er att skriva effektiva enhetstester för enskilda komponenter i era Micro Frontends.

Lektion 1 av 412 steg

Enhetstesta federerade komponenter är en gratis lektion i Mikrofrontendarkitektur med Module Federation på CoddyKit. Detta är lektion 1 av 4. 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 Mikrofrontendarkitektur med Module Federation, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.

Enhetstestning av MFE-komponenter

Välkommen! I den här lektionen går vi igenom enhetstestning av enskilda komponenter i era Micro Frontends.

Enhetstestning fokuserar på att testa de minsta, isolerade delarna av koden, till exempel en enskild knapp eller ett inmatningsfält. För Micro Frontends säkerställer detta att varje komponent fungerar korrekt på egen hand före integreringen.

Varför enhetstesta MFE:er?

Enhetstestning är avgörande för Micro Frontends eftersom de är självständiga:

Isolering: Testa komponenter utan att vara beroende av andra Micro Frontends.
Snabbare återkoppling: Upptäck fel tidigt och som är specifika för en komponent.
Självständig driftsättning: Driftsätt en komponent med trygghet i att kärnlogiken fungerar.
Tydliga kontrakt: Säkerställ att komponenterna beter sig som förväntat när de exponeras eller används.

Viktiga testverktyg

För JavaScript-baserade Micro Frontends, särskilt sådana som använder React, är två verktyg mycket populära:

Jest: Ett kraftfullt testningsramverk för JavaScript. Det fungerar som testkörning, assertionsbibliotek och verktyg för mocking. Se det som ”hur” Ni kör testerna.
React Testing Library (RTL): En uppsättning verktyg för att testa React-komponenter på ett sätt som liknar hur användare interagerar med applikationen. Fokus ligger på ”vad” användaren ser och interagerar med, inte på interna implementeringsdetaljer.

Vår enkla komponent

Låt oss skapa en mycket enkel React-komponent som vi ska enhetstesta. Komponenten kan ingå i vilket Micro Frontend som helst och senare exponeras via Module Federation.

Det är bara en enkel knapp som visar text och kan utlösa en åtgärd.

import React from 'react';

const MyButton = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default MyButton;

Konfigurera testfilen

Enhetstester placeras vanligtvis i filer som slutar med .test.js eller .spec.js bredvid komponenten eller i en mapp med namnet __tests__.

Vi använder Jest och React Testing Library. Först importerar Ni komponenten och de RTL-funktioner som behövs.

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyButton from './MyButton'; // Our component to test

Grundläggande test av komponentrendering

Låt oss skriva vårt första enhetstest för att kontrollera om komponenten MyButton renderas korrekt med en angiven etikett.

Vi använder render() för att ”montera” komponenten och screen.getByText() för att hitta den renderade texten. Därefter använder vi expect() för att verifiera att den finns.

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('renders with the correct label', () => {
    render(<MyButton label="Hello World" />);
    expect(screen.getByText(/Hello World/i)).toBeInTheDocument();
  });
});

Testa användarinteraktioner

Komponenter reagerar ofta på användaråtgärder, till exempel klick. Vi kan simulera dessa interaktioner i våra tester för att säkerställa att komponenten beter sig som förväntat.

Vi använder fireEvent.click() från RTL för att simulera ett användarklick och verifierar att vår hanterare anropades med hjälp av Jest:s mockfunktioner.

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest's mock function
    render(<MyButton label="Click Me" onClick={handleClick} />);
    
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Mocka beroenden

Enhetstester bör vara isolerade. Om komponenten är beroende av externa tjänster, API-anrop eller andra komplexa moduler bör Ni ”mocka” dem.

Mocking ersätter verkliga beroenden med kontrollerade, simulerade versioner. Jest har kraftfullt stöd för mocking (t.ex. jest.fn() för funktioner och jest.mock() för moduler), så att komponenten kan testas isolerat.

Varför mocka i MFE:er?

I Micro Frontends är mocking särskilt viktigt:

Frikoppling: Testa en komponent utan att andra Micro Frontends eller delade bibliotek måste fungera fullt ut.
Hastighet: Mocks körs direkt och undviker långsamma nätverksförfrågningar eller komplexa beräkningar.
Kontroll: Simulera olika scenarier (t.ex. lyckade eller misslyckade API-anrop samt laddningstillstånd) som är svåra att utlösa med verkliga beroenden.

Bästa praxis för enhetstester

Följ dessa principer när Ni skriver effektiva enhetstester för era federerade komponenter:

Testa en sak: Varje test bör fokusera på en enda funktion.
Håll det enkelt: Undvik komplex logik i testerna.
Testa det publika API:t: Fokusera på vad komponenten gör (dess utdata och interaktioner), inte hur den gör det (det interna tillståndet).
Underhållbart: Använd tydliga och beskrivande testnamn.

Snabbkontroll av enhetstestning

Vilka av följande är viktiga fördelar med att enhetstesta enskilda komponenter i en Micro Frontend-arkitektur?

Besvara frågan i den interaktiva lektionen

Sammanfattning: enhetstestning av komponenter

Bra jobbat! Ni har lärt Er grunderna i att enhetstesta enskilda komponenter i en Micro Frontend-arkitektur.

Vi undersökte varför isolering är viktig och hur verktyg som Jest och React Testing Library hjälper till.
Ni fick se exempel på testning av komponentrendering och användarinteraktioner.
Förståelse för mocking är avgörande för att bevara testernas isolering och snabbhet.

Genom att behärska enhetstester säkerställer Ni att varje del av den federerade applikationen är robust och tillförlitlig.

Gratis att börja

Lär dig JavaScript 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: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Enhetstesta federerade komponenter” gratis?

Ja – hela texten till ”Enhetstesta federerade komponenter” 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 Mikrofrontendarkitektur med Module Federation, kan Ni uppgradera till CoddyKit PRO. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.

Vad lär jag mig i ”Enhetstesta federerade komponenter”?

Lär er att skriva effektiva enhetstester för enskilda komponenter i era Micro Frontends. Ni övar på Mikrofrontendarkitektur med Module Federation 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 Mikrofrontendarkitektur med Module Federation?

Du behöver inga förkunskaper. Utbildningen i Mikrofrontendarkitektur med Module Federation 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 4.

Hur lång tid tar lektionen ”Enhetstesta federerade komponenter”?

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 Mikrofrontendarkitektur med Module Federation-lektionen?

Ja. Varje Mikrofrontendarkitektur med Module Federation-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

Enhetstesta federerade komponenter
Strategier för integrationstestning
End-to-end-testning mellan appar
Kontraktstestning mellan micro frontends

← Tillbaka till Mikrofrontendarkitektur med Module Federation