Strategieën voor integration testing

Welkom bij integratietests voor Micro Frontends! In deze les leer je hoe je de verbindingen en interacties tussen verschillende onderdelen van je gefedereerde applicatie test.

Eenheidstests controleren afzonderlijke componenten, terwijl integratietests ervoor zorgen dat meerdere Micro Frontends (MFEs) of gedeelde modules correct samenwerken als één geheel.

In een Micro Frontend-architectuur ontwikkelen verschillende teams vaak zelfstandig onderdelen van de applicatie. Dat biedt veel flexibiliteit, maar brengt ook unieke uitdagingen voor tests met zich mee.

• Interacties controleren: zorg ervoor dat MFEs correct met elkaar communiceren.
• Integratiefouten opsporen: vind problemen waarbij componenten niet goed op elkaar aansluiten.
• Vertrouwen vergroten: implementeer met de zekerheid dat je gefedereerde applicatie werkt.

Dit is belangrijk, omdat een bug in de interactie tussen twee MFEs de volledige gebruikerservaring kan verstoren.

Het testen van interacties tussen onafhankelijke applicaties is niet altijd eenvoudig. Dit zijn enkele veelvoorkomende obstakels:

• Omgeving instellen: het nabootsen van een volledige gefedereerde omgeving voor tests kan complex zijn.
• Afhankelijkheden beheren: omgaan met meerdere externe modules en hun versies.
• Testisolatie: ervoor zorgen dat tests elkaar niet beïnvloeden wanneer ze de grenzen tussen MFEs overschrijden.
• Prestaties: integratietests zijn doorgaans trager dan eenheidstests.

We bekijken strategieën om deze uitdagingen te overwinnen.

Richt je bij het ontwerpen van integratietests voor Micro Frontends op deze principes:

• Test contracten: controleer of beschikbaar gestelde interfaces en gebruikte API's (gegevensstructuren en functiesignaturen) compatibel zijn.
• End-to-endprocessen: test essentiële gebruikersprocessen die meerdere MFEs omvatten.
• Gegevensdoorgifte: zorg ervoor dat gegevens correct worden bijgewerkt in gedeelde status of communicatiekanalen.
• UI-samenstelling: controleer of verschillende MFE-interfaces correct worden weergegeven en zich gedragen zoals verwacht wanneer ze worden samengevoegd.

Test interne logica die al door eenheidstests wordt afgedekt niet opnieuw.

Verschillende tools kunnen helpen bij integratietests van MFEs:

• Jest / React Testing Library: uitstekend geschikt voor integratie op componentniveau, waarbij je test hoe een host een externe component geïsoleerd gebruikt.
• Cypress / Playwright: uitstekend geschikt voor end-to-endtests (E2E), waarbij je echte gebruikersinteracties tussen meerdere geïmplementeerde MFEs in een browser simuleert.
• Mock Service Worker (MSW): voor het mocken van API-aanroepen en netwerkaanvragen, handig bij het testen van MFEs die afhankelijk zijn van back-endservices.

De keuze hangt af van de reikwijdte en diepgang van je integratietests.

Een veelvoorkomend integratiepunt voor MFEs is een hostapplicatie die een component of hulpprogramma gebruikt dat door een externe applicatie via Module Federation beschikbaar wordt gesteld.

We moeten controleren of de host correct ontvangt en gebruikt wat de externe applicatie aanbiedt. Hier volgt een vereenvoudigd JavaScript-voorbeeld om te laten zien hoe een gedeeld hulpprogramma wordt gebruikt:

Veel Micro Frontends communiceren via een gebeurtenisbussysteem of aangepaste gebeurtenissen. Integratietests moeten controleren of gebeurtenissen correct worden verzonden en verwerkt over de grenzen van MFEs heen.

Je kunt deze gebeurtenissen in je tests simuleren en controleren of de ontvangende MFE reageert zoals verwacht. Hier volgt een conceptueel testfragment:

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

Hiermee controleer je het communicatiecontract.

Als je MFEs een globale statusopslag delen (bijvoorbeeld Redux of Zustand), moeten integratietests controleren of wijzigingen in één MFE de gedeelde status correct bijwerken en of andere MFEs die deze status gebruiken daar passend op reageren.

Daarvoor worden vaak meerdere MFEs in een testomgeving weergegeven en worden gebruikersinteracties gesimuleerd:

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

Zo zorg je ervoor dat de status consistent blijft in je gefedereerde applicatie.

Soms hoef je niet voor elke integratietest alle externe MFE's te laden. Misschien wil je specifieke externe modules of hun afhankelijkheden mocken.

• Waarom mocken? Snellere tests, fouten isoleren en specifieke scenario's testen (bijvoorbeeld een fout in een externe MFE).
• Hoe mock je? Gebruik de mogelijkheden van je testframework om te mocken (bijvoorbeeld jest.mock() van Jest) en vervang een extern component of een externe functie door een gecontroleerde test-dubbel.

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

Zo kun je de logica van de host testen zonder de echte externe MFE nodig te hebben.

Goed gedaan! Je hebt belangrijke strategieën voor het integratietesten van micro-frontends geleerd:

• Integratietests controleren de interacties tussen MFE's en gedeelde modules.
• Ze pakken unieke uitdagingen aan, zoals het instellen van de omgeving en het isoleren van tests.
• Richt je op contracten, gegevensstromen en communicatie tussen MFE's.
• Hulpmiddelen zoals Jest, React Testing Library, Cypress en Playwright zijn essentieel.
• Technieken omvatten het testen van het gebruik van componenten, gebeurtenisafhandeling, gedeelde status en strategisch mocken.

Door deze strategieën toe te passen, kun je robuustere en betrouwbaardere gefedereerde applicaties bouwen. Blijf oefenen!