Detox: wat het is, werkingsprincipes en E2E-testen

Wat is Detox

Detox is een framework voor uitgebreid (E2E) testen van mobiele applicaties, ontwikkeld door Wix in 2017. Het is bedoeld voor React Native-projecten, maar ondersteunt ook volledig native applicaties op iOS en Android. Detox werkt volgens het gray-box-model, wat betekent dat het toegang heeft tot de interne mechanismen van de applicatie.

Verschil met andere E2E-frameworks

Het belangrijkste verschil tussen Detox en Appium of Calabash is automatische synchronisatie met de applicatie. Het framework wacht op het voltooien van animaties, netwerkverzoeken en gebeurtenisverwerking voordat het de volgende actie uitvoert. Dit elimineert volledig de noodzaak voor Thread.sleep() of waitForElement, die tests vertragen.

Ondersteunde platforms

Detox ondersteunt iOS (via XCTest en Xcode) en Android (via Espresso en UI Automator). Voor React Native-applicaties wordt volledige ondersteuning geboden voor Fabric en de oude architectuur. Op iOS worden tests uitgevoerd op de simulator, op Android — op de emulator of een fysiek apparaat.

Detox-architectuur en gray-box-model

De Detox-architectuur bestaat uit drie belangrijke componenten: Detox CLI, Detox test-runner en Detox Native Driver. Detox CLI beheert het bouwen van de applicatie, installatie en het uitvoeren van tests. De test-runner (Jest of Mocha) voert testscenario's uit en communiceert met de applicatie via WebSocket.

Gray-box benadering

Gray-box testen betekent dat Detox toegang heeft tot de interne status van de applicatie via een native brug. Het framework volgt netwerkverzoeken, animaties, timers en de operatiewachtrij. Wanneer alle wachtrijen leeg zijn — beschouwt Detox de applicatie als klaar voor de volgende stap.

Synchronisatiemechanisme

Synchronisatie is gebaseerd op het volgen van de hoofdthread (main thread) van de applicatie. Detox wacht tot alle animaties zijn voltooid, HTTP-verzoeken antwoord hebben gegeven en gebeurtenishandlers zijn uitgevoerd. Als een test vastloopt door een oneindige animatie — kan synchronisatie geforceerd worden uitgeschakeld voor een specifiek codeblok.

// Synchronisatie uitschakelen voor problematisch gedeelte
await device.disableSynchronization();
// Actie met lange animatie
await element(by.id('loader')).swipe('down');
await device.enableSynchronization();

Detox installeren en configureren

Detox installeren begint met het toevoegen van het pakket via npm of yarn. Na installatie moet een configuratiebestand .detoxrc.js worden aangemaakt waarin de build- en uitvoeringsinstellingen voor elk platform worden beschreven. Detox gebruikt zijn eigen build-type voor iOS, gebaseerd op Xcode-configuratie.

Basisconfiguratie

De configuratie omvat het pad naar de applicatie (app), het buildertype (build), build-argumenten en apparaatinstellingen (device). Voor iOS wordt appleSimulator gebruikt, voor Android — androidEmulator. Ook kunnen opstartargumenten zoals taal of regio van de simulator worden opgegeven.

// .detoxrc.js — configuratievoorbeeld
module.exports = {
  testRunner: { args: { '$0': 'jest', config: 'e2e/config.json' } },
  apps: {
    'ios.debug': { type: 'ios.app', build: 'xcodebuild ...' },
    'android.debug': { type: 'android.apk', build: 'cd android && ./gradlew ...' }
  },
  devices: {
    simulator: { type: 'ios.simulator', device: { type: 'iPhone 15' } },
    emulator: { type: 'android.emulator', device: { avdName: 'Pixel_4_API_34' } }
  }
};

Uitvoeringscommando's

Na configuratie zijn de commando's beschikbaar: detox build — de applicatie bouwen met testvlaggen en detox test — tests uitvoeren. Detox ondersteunt parallelle uitvoering op meerdere apparaten via de --workers-vlag.

Tests schrijven met Detox

Detox-tests worden geschreven in JavaScript of TypeScript met behulp van een API gebaseerd op het zoeken van elementen (matchers) en acties (actions). Matchers maken het mogelijk een element te vinden op id, tekst, type of positie op het scherm. Actions voeren tikken, tekstinvoer, vegen en scrollen uit.

Structuur van een testscenario

Een typische test ziet eruit als een reeks: vind het element → voer de actie uit → controleer het resultaat. Voor controles wordt expect-API gebruikt met matchers op aanwezigheid, zichtbaarheid of tekst van het element. Detox ondersteunt describe/it-syntax via integratie met Jest.

describe('Login flow', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should log in with valid credentials', async () => {
    await element(by.id('emailInput')).typeText('user@test.com');
    await element(by.id('passwordInput')).typeText('password123');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('homeScreen'))).toBeVisible();
  });
});

Werken met gebaren

Detox ondersteunt alle populaire gebaren: tap, longPress, swipe, scroll, pinch, multiTap. Voor scroll kunnen richting, snelheid en stoppositie worden opgegeven. Dit maakt het mogelijk complexe scenario's te testen, zoals pull-to-refresh of carrousels.

Detox integreren in CI/CD

Detox integreert goed met populaire CI-systemen: GitHub Actions, CircleCI, Bitrise en Jenkins. Voor uitvoering in CI moet een virtuele simulator iOS (zonder GUI) en een Android-emulator met hardwareversnelling worden geconfigureerd. Detox levert artefacten — screenshots en logs — voor analyse van mislukte tests.

Aanbevelingen voor CI

Om de testuitvoering in CI te versnellen, wordt aanbevolen sharding (parallellisatie) te gebruiken met de --workers-vlag. Detox verdeelt testbestanden automatisch over meerdere simulatoren. Ook is het nuttig om applicatie-builds tussen uitvoeringen te cachen om de bouwtijd te verkorten.

# GitHub Actions — Detox uitvoeren op iOS
- name: Install Dependencies
  run: npm ci

- name: Build Detox App
  run: npx detox build --configuration ios.sim

- name: Run Detox Tests
  run: npx detox test --configuration ios.sim --workers 2
  timeout-minutes: 30

Beste praktijken voor Detox

Voor stabiele en snelle E2E-tests wordt aanbevolen een aantal regels te volgen. Vermijd sleep() — Detox biedt automatische synchronisatie en expliciete vertragingen vertragen alleen tests en maken ze instabiel. Als een test faalt door timing, controleer dan eerst of synchronisatie niet is uitgeschakeld. Ook is het nuttig om tests per functie te groeperen en ze onafhankelijk uit te voeren — dit vereenvoudigt het vinden van de oorzaak van een fout.

Gebruik van device-methoden

Detox biedt verschillende device-methoden voor statusbeheer: device.reloadReactNative() herlaadt de bundle, device.launchNewApp() start de applicatie met nieuwe parameters, device.sendToHome() minimaliseert de applicatie. device.setURLBlacklist() maakt het mogelijk bepaalde URL's uit te sluiten van synchronisatie, wat handig is voor analytics en long-polling-verbindingen.

Organisatie van testgegevens

Voor elke test wordt aanbevolen een geïsoleerde status te creëren. Gebruik beforeEach om de applicatie opnieuw te laden via device.reloadReactNative(). Voor tests die specifieke gegevens vereisen, maak fabrieken of API-clients voor het voorbereiden van gegevens op de server. Vermijd afhankelijkheden tussen tests — elke test moet onafhankelijk zijn.

Werken met WebView

Detox ondersteunt het testen van WebView via de methoden web.element() en web.invoke(). Voor interactie met webelementen wordt by.web(id, css of className) gebruikt. Het is belangrijk te onthouden dat WebView extra laadtijd nodig heeft — als synchronisatie niet werkt, voeg dan wachten op laden toe via waitFor.

// WebView testen in Detox
const webView = web(by.id('webview'));
await webView.element(by.web.cssSelector('#submit-btn')).tap();
const result = await webView.element(
  by.web.cssSelector('.result-text')
).getText();
await expect(result).toEqual('Success');

Screenshot-testen

Detox ondersteunt het vergelijken van screenshots via de plugin detox-image-matching. Screenshots maken het mogelijk visuele regressies te detecteren: verschoven elementen, onjuiste kleuren, ontbrekende pictogrammen. Voor stabiele screenshots schakelt u animaties uit en gebruikt u een vaste simulatorgrootte.

Diagnose van Detox-problemen

De meest voorkomende Detox-problemen hebben te maken met synchronisatie: oneindige animaties, lange netwerkverzoeken of vastgelopen timers. Logging met de --loglevel trace-vlag laat zien welke bronnen Detox verwacht. Als Detox vastloopt — gebruik device.disableSynchronization() voor het problematische codegedeelte.

Problemen met de simulator

Op de iOS-simulator vereist Detox vooraf bouwen van de applicatie via xcodebuild met de configuratie iphonesimulator. Een veelgemaakte fout is het gebruik van het Release-schema in plaats van Debug, wat testvlaggen uitschakelt. Voor Android, zorg ervoor dat de AVD is gemaakt met een API die compatibel is met uw applicatie en dat Intel HAXM-versnelling is ingeschakeld. Voor CI-omgevingen op macOS is het handig om GitHub Actions met een macOS-runner te gebruiken, waar Xcode en simulatoren al voorgeïnstalleerd zijn.

Test-timeouts

Als tests regelmatig falen door timeouts, controleer dan: of synchronisatie niet wereldwijd is uitgeschakeld, of in de applicatiecode geen setTimeout of setInterval zonder opschoning wordt gebruikt, en of de hoofdthread niet wordt geblokkeerd door een langdurige bewerking. Soms helpt het verhogen van de timeout in detoxrc.js via testRunner.args.jest.$.testTimeout. Voor het vinden van problematische delen, schakel Detox-tracering logging in — het laat zien welke bronnen en timers momenteel door het framework worden verwacht.

Artefacten en rapporten

Na het uitvoeren van tests maakt Detox artefacten: screenshots van mislukte tests, applicatielogs en JUnit XML-rapporten. Screenshots worden automatisch gemaakt bij een mislukte test en helpen het probleem visueel te identificeren. Voor CI worden artefacten geüpload naar cloudopslag en zijn ze toegankelijk via de webinterface voor analyse van foutoorzaken.