Strategier for integrasjonstesting

Velkommen til integrasjonstesting av Micro Frontends! Denne leksjonen handler om hvordan De tester forbindelsene og samhandlingene mellom ulike deler av den fødererte applikasjonen.

Mens enhetstester kontrollerer enkeltkomponenter, sikrer integrasjonstester at flere Micro Frontends (MFE-er) eller delte moduler fungerer riktig sammen som et helhetlig system.

I en Micro Frontend-arkitektur utvikler ulike team ofte deler av applikasjonen uavhengig av hverandre. Dette gir stor fleksibilitet, men også unike testutfordringer.

• Bekrefte samhandling: Sørg for at MFE-er kommuniserer riktig.
• Oppdage integrasjonsfeil: Finn problemer der komponenter ikke passer sammen.
• Større trygghet: Rull ut med visshet om at den fødererte applikasjonen fungerer.

Dette er avgjørende fordi en feil i samhandlingen mellom to MFE-er kan ødelegge hele brukeropplevelsen.

Det er ikke alltid enkelt å teste samhandling på tvers av uavhengige applikasjoner. Her er noen vanlige utfordringer:

• Oppsett av miljø: Det kan være komplekst å gjenskape et komplett føderert miljø for tester.
• Håndtering av avhengigheter: Håndtering av flere eksterne moduler og versjonene deres.
• Testisolasjon: Sørge for at testene ikke påvirker hverandre når de krysser MFE-grenser.
• Ytelse: Integrasjonstester er vanligvis langsommere enn enhetstester.

Vi skal utforske strategier for å håndtere disse utfordringene.

Fokuser på disse prinsippene når De utformer integrasjonstester for Micro Frontends:

• Test kontrakter: Bekreft at eksponerte grensesnitt og brukte API-er (datastrukturer og funksjonssignaturer) er kompatible.
• Flyter fra start til slutt: Test kritiske brukerforløp som går på tvers av flere MFE-er.
• Dataflyt: Sørg for at data oppdateres riktig på tvers av delt tilstand eller kommunikasjonskanaler.
• UI-sammensetning: Kontroller at ulike MFE-grensesnitt gjengis og samhandler som forventet når de settes sammen.

Unngå å teste intern logikk på nytt når den allerede er dekket av enhetstester.

Ulike verktøy kan hjelpe med integrasjonstesting av MFE-er:

• Jest / React Testing Library: Svært godt egnet for integrasjon på komponentnivå, der De tester hvordan en vert bruker en ekstern komponent isolert.
• Cypress / Playwright: Utmerket for ende-til-ende-testing (E2E), der reelle brukerinteraksjoner simuleres på tvers av flere utrullede MFE-er i en nettleser.
• Mock Service Worker (MSW): For mocking av API-kall og nettverksforespørsler, noe som er nyttig ved testing av MFE-er som er avhengige av backend-tjenester.

Valget avhenger av omfanget og detaljnivået til integrasjonstestene.

Et vanlig integrasjonspunkt for MFE-er er at en vertsapplikasjon bruker en komponent eller et verktøy som er eksponert av en ekstern applikasjon via Module Federation.

Vi må bekrefte at verten mottar og bruker det den eksterne applikasjonen tilbyr, på riktig måte. Her er et forenklet JavaScript-eksempel som illustrerer hvordan et delt verktøy brukes:

Mange Micro Frontends kommuniserer ved hjelp av en eventbuss eller egendefinerte hendelser. Integrasjonstester bør sikre at hendelser sendes og håndteres riktig på tvers av MFE-grenser.

De kan simulere disse hendelsene i testene og kontrollere at den mottakende MFE-en reagerer som forventet. Her er et konseptuelt testutdrag:

// 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 kommunikasjonskontrakten.

Hvis MFE-ene deler et globalt tilstandslager (for eksempel Redux eller Zustand), må integrasjonstestene bekrefte at endringer i én MFE oppdaterer den delte tilstanden riktig, og at andre MFE-er som bruker denne tilstanden, reagerer på riktig måte.

Dette innebærer ofte at flere MFE-er gjengis i et testmiljø, og at brukerinteraksjoner 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();
    });
  });
});

Dette sikrer at tilstanden er konsistent på tvers av den fødererte applikasjonen.

Noen ganger trenger du ikke å laste inn alle eksterne MFE-er for hver integrasjonstest. Du vil kanskje mocke bestemte eksterne moduler eller avhengighetene deres.

• Hvorfor mocke? Raskere tester, isolering av feil og testing av bestemte scenarier (for eksempel feil i en ekstern MFE).
• Slik mocker du: Bruk testingsrammeverkets funksjoner for mocking (for eksempel Jest sin jest.mock()) til å erstatte en ekstern komponent eller funksjon med en kontrollert testdobbeltgjenger.

// 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>
  ),
}));

Dette lar deg teste logikken i vertsapplikasjonen uten å trenge den faktiske eksterne modulen.

Godt jobbet! Du har lært om viktige strategier for integrasjonstesting i Micro Frontends:

• Integrasjonstester verifiserer samspillet mellom MFE-er og delte moduler.
• De håndterer unike utfordringer, som oppsett av miljøet og isolering av tester.
• Fokuser på testing av kontrakter, dataflyt og kommunikasjon på tvers av MFE-er.
• Verktøy som Jest, React Testing Library, Cypress og Playwright er viktige.
• Teknikkene omfatter testing av komponentbruk, hendelseshåndtering, delt tilstand og strategisk mocking.

Ved å bruke disse strategiene kan du bygge mer robuste og pålitelige federerte applikasjoner. Fortsett å øve!