Strategier til integrationstest

Velkommen til integrationstest af Micro Frontends! Denne lektion fokuserer på, hvordan du tester forbindelserne og interaktionerne mellem forskellige dele af din federerede applikation.

Mens enhedstests kontrollerer individuelle komponenter, sikrer integrationstests, at flere Micro Frontends (MFE'er) eller delte moduler fungerer korrekt sammen som et samlet system.

I en Micro Frontend-arkitektur udvikler forskellige teams ofte dele af applikationen uafhængigt af hinanden. Det giver stor fleksibilitet, men også særlige testudfordringer.

• Kontrollér interaktioner: Sørg for, at MFE'er kommunikerer korrekt.
• Opdag integrationsfejl: Find problemer, hvor komponenter ikke passer sammen.
• Styrk tilliden: Udrul med sikkerhed for, at din federerede app fungerer.

Det er afgørende, fordi en fejl i samspillet mellem to MFE'er kan ødelægge hele brugeroplevelsen.

Det er ikke altid ligetil at teste interaktioner på tværs af uafhængige applikationer. Her er nogle almindelige udfordringer:

• Opsætning af miljøet: Det kan være komplekst at genskabe et fuldt federeret miljø til tests.
• Håndtering af afhængigheder: Håndtering af flere fjernmoduler og deres versioner.
• Testisolation: Sørg for, at tests ikke påvirker hinanden, når de går på tværs af MFE-grænser.
• Ydeevne: Integrationstests er typisk langsommere end enhedstests.

Vi undersøger strategier til at overvinde disse udfordringer.

Fokuser på disse principper, når du designer integrationstests for Micro Frontends:

• Test kontrakter: Kontrollér, at eksponerede interfaces og anvendte API'er (datastrukturer og funktionssignaturer) er kompatible.
• End-to-end-forløb: Test kritiske brugerforløb, der går på tværs af flere MFE'er.
• Dataformidling: Sørg for, at data opdateres korrekt på tværs af delt tilstand eller kommunikationskanaler.
• UI-komposition: Kontrollér, at forskellige MFE-brugergrænseflader gengives og interagerer som forventet, når de sættes sammen.

Undgå at teste intern logik igen, hvis den allerede er dækket af enhedstests.

Forskellige værktøjer kan hjælpe med integrationstest af MFE'er:

• Jest / React Testing Library: Velegnet til integration på komponentniveau, hvor du tester, hvordan en host bruger en fjernkomponent isoleret.
• Cypress / Playwright: Fremragende til end-to-end-test (E2E), hvor virkelige brugerinteraktioner simuleres på tværs af flere udrullede MFE'er i en browser.
• Mock Service Worker (MSW): Bruges til mocking af API-kald og netværksanmodninger og er nyttigt ved test af MFE'er, der er afhængige af backend-tjenester.

Valget afhænger af dine integrationstests' omfang og dybde.

Et almindeligt integrationspunkt for MFE'er er en host-applikation, der bruger en komponent eller et hjælpeværktøj, som en fjernapplikation har eksponeret via Module Federation.

Vi skal kontrollere, at hosten modtager og bruger det, som fjernapplikationen leverer, korrekt. Her er et forenklet JavaScript-eksempel, der illustrerer konceptet med et delt hjælpeværktøj, som bliver brugt:

Mange Micro Frontends kommunikerer ved hjælp af en eventbus eller brugerdefinerede hændelser. Integrationstests skal sikre, at hændelser afsendes og håndteres korrekt på tværs af MFE-grænser.

Du kan simulere disse hændelser i dine tests og kontrollere, at den modtagende MFE reagerer som forventet. Her er et konceptuelt testudsnit:

// In a test file (e.g., using Jest)

describe('MFE A dispatches, MFE B reacts', () => {
  test('MFE B updates state after MFE A event', () => {
    // 1. Render MFE B (the listener)
    const { getByText } = render(<MFEBComponent />);

    // 2. Simulate MFE A dispatching an event
    //    (e.g., via a global event bus or DOM event)
    window.dispatchEvent(new CustomEvent('userLoggedIn', {
      detail: { username: 'testuser' }
    }));

    // 3. Assert MFE B's UI or state updated
    expect(getByText('Welcome, testuser!')).toBeInTheDocument();
  });
});

Dette kontrollerer kommunikationskontrakten.

Hvis dine MFE'er deler et globalt tilstandslager (f.eks. Redux eller Zustand), skal integrationstests kontrollere, at ændringer i én MFE korrekt opdaterer den delte tilstand, og at andre MFE'er, der bruger denne tilstand, reagerer korrekt.

Det indebærer ofte, at flere MFE'er gengives i et testmiljø, og at brugerinteraktioner simuleres:

// Conceptual test for shared state

describe('Shared user profile state', () => {
  test('MFE A update reflects in MFE B', async () => {
    // 1. Render Host app with MFE A and MFE B
    const { getByLabelText, getByText } = render(<HostApp />);

    // 2. Simulate user action in MFE A (e.g., update profile name)
    fireEvent.change(getByLabelText('Name Input'), { target: { value: 'Jane Doe' } });
    fireEvent.click(getByText('Save Profile'));

    // 3. Assert MFE B (which displays profile) shows the new name
    await waitFor(() => {
      expect(getByText('Profile Name: Jane Doe')).toBeInTheDocument();
    });
  });
});

Det sikrer, at tilstanden er konsistent på tværs af din federerede applikation.

Nogle gange behøver du ikke indlæse alle fjern-MFE'er til hver integrationstest. Du vil måske simulere bestemte fjernmoduler eller deres afhængigheder.

• Hvorfor simulere? Hurtigere test, isolering af fejl og test af bestemte scenarier (f.eks. fejl i en fjern-MFE).
• Sådan simulerer du: Brug testprogrammets funktioner til simulering (f.eks. Jest's jest.mock()) til at erstatte en fjernkomponent eller funktion med en kontrolleret testdobbelt.

// Example of mocking a remote component

jest.mock('remoteApp/Button', () => ({ 
  __esModule: true, 
  default: ({ onClick, children }) => (
    <button onClick={onClick} data-testid="mock-button">
      {children} (Mocked)
    </button>
  ),
}));

Det giver dig mulighed for at teste værtens logik uden at have brug for den faktiske fjernkomponent.

Godt klaret! Du har lært om vigtige strategier til integrationstest i Micro Frontends:

• Integrationstest kontrollerer interaktioner mellem MFE'er og delte moduler.
• De håndterer særlige udfordringer som opsætning af miljøet og isolering af test.
• Fokuser på at teste kontrakter, dataflow og kommunikation på tværs af MFE'er.
• Værktøjer som Jest, React Testing Library, Cypress og Playwright er afgørende.
• Teknikkerne omfatter test af komponentforbrug, hændelseshåndtering, delt tilstand og strategisk simulering.

Ved at anvende disse strategier kan du bygge mere robuste og pålidelige fødererede applikationer. Bliv ved med at øve dig!