React Native Academy · Les

Jest instellen in een React Native-project

Configureer Jest met de react-native-preset, voer uw eerste testbestand uit, leer de API's test, describe en expect kennen en stel rapportage van codedekking in.

Les 1 van 413 stappen

Jest instellen in een React Native-project is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Waarom React Native-code testen

Tests zijn je vangnet wanneer je wijzigingen aanbrengt. Met een goed geschreven testsuite kun je vol vertrouwen refactoren, regressies opsporen voordat ze gebruikers bereiken en verwacht gedrag voor je teamgenoten documenteren. Voor React Native zijn tests vooral waardevol, omdat het uitvoeren van de volledige app op een simulator traag is in vergelijking met het uitvoeren van unit-tests.

React Native kent drie testniveaus: unit-tests (afzonderlijke functies en hooks), componenttests (componenten weergeven en de uitvoer controleren) en end-to-end-tests (de echte app op een apparaat bedienen). Jest verwerkt de eerste twee.

Jest is vooraf geconfigureerd

React Native-projecten die zijn gemaakt met de React Native CLI of Expo SDK bevatten Jest al. Je vindt jest in devDependencies en een Jest-configuratie in package.json onder de sleutel 'jest', of in een jest.config.js-bestand.

De preset 'react-native' (uit @react-native/jest-preset) of 'jest-expo' (voor Expo) configureert Jest om JSX te transformeren en automatisch mocks voor native modules af te handelen. Gebruik altijd de juiste preset voor het type project.

// package.json (React Native CLI project)
{
  'jest': {
    'preset': 'react-native'
  }
}

// package.json (Expo project)
{
  'jest': {
    'preset': 'jest-expo',
    'transformIgnorePatterns': [
      'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*)'
    ]
  }
}

Je eerste test uitvoeren

Voer tests uit met npx jest of gewoon met yarn test. Jest vindt alle bestanden die overeenkomen met *.test.ts, *.test.tsx, *.spec.ts of bestanden in mappen met de naam __tests__. Voeg --watch toe om tests automatisch opnieuw uit te voeren wanneer bestanden wijzigen — dit is de aanbevolen werkwijze tijdens het ontwikkelen.

Een nieuw gegenereerd project bevat een voorbeeldtest in App.test.tsx. Als je deze uitvoert, bevestig je dat je Jest-configuratie werkt voordat je je eigen tests schrijft.

# Run all tests once
npx jest

# Run in watch mode (rerun on file change)
npx jest --watch

# Run a specific test file
npx jest src/utils/formatDate.test.ts

# Run tests matching a pattern
npx jest --testNamePattern='should format'

De opbouw van een test

Een Jest-testbestand gebruikt drie kernfuncties: describe groepeert gerelateerde tests, it (of test) definieert één testgeval en expect doet beweringen over waarden. Het patroon is: arrange (gegevens instellen), act (de code uitvoeren), assert (de uitvoer controleren).

Testnamen moeten het verwachte gedrag in gewone taal beschrijven. Goede testnamen lezen als documentatie: 'should return null when the input is empty' is duidelijker dan 'test1'.

// src/utils/formatDate.test.ts
import { formatDate } from './formatDate';

describe('formatDate', () => {
  it('should format a date as MMM DD, YYYY', () => {
    // Arrange
    const date = new Date('2024-03-15T10:00:00Z');

    // Act
    const result = formatDate(date);

    // Assert
    expect(result).toBe('Mar 15, 2024');
  });

  it('should return null when the input is null', () => {
    expect(formatDate(null)).toBeNull();
  });
});

Veelgebruikte Jest-matchers

Jest biedt een uitgebreide verzameling matchers — methoden op het object expect die waarden op verschillende manieren controleren. De meestgebruikte matchers voor React Native-tests zijn:

toBe(value) — strikte gelijkheid met ===
toEqual(value) — diepe gelijkheid voor objecten en arrays
toBeTruthy() / toBeFalsy() — controles op waarheidsgetrouwe en onwaarheidsgetrouwe waarden
toContain(item) — array bevat item
toThrow() — functie genereert een fout

// Strict equality (for primitives)
expect(2 + 2).toBe(4);

// Deep equality (for objects)
expect({ name: 'Alice', age: 30 }).toEqual({ name: 'Alice', age: 30 });

// Array checks
expect(['a', 'b', 'c']).toContain('b');
expect(['a', 'b', 'c']).toHaveLength(3);

// Null / undefined
expect(null).toBeNull();
expect(undefined).toBeUndefined();

// Error throwing
expect(() => JSON.parse('invalid')).toThrow(SyntaxError);

Zuivere functies testen

De eenvoudigste dingen om te testen zijn pure functies — functies die invoer ontvangen, uitvoer retourneren en geen bijwerkingen hebben. Voorbeelden zijn validatiefuncties, gegevenstransformaties en hulpfuncties. Deze tests zijn snel en vereisen geen mocking.

Schrijf één test per randgeval. Test het verwachte pad (geldige invoer), grenswaarden (lege tekenreeks, nul, null) en foutgevallen (ongeldige invoer). Hier hoort de verhouding tussen tests en code het hoogst te zijn.

// src/utils/validators.ts
export function isValidEmail(email: string): boolean {
  return /^[^@]+@[^@]+\.[^@]+$/.test(email);
}

// src/utils/validators.test.ts
import { isValidEmail } from './validators';

describe('isValidEmail', () => {
  it('should return true for a valid email', () => {
    expect(isValidEmail('user@example.com')).toBe(true);
  });

  it('should return false for an email without @', () => {
    expect(isValidEmail('notanemail.com')).toBe(false);
  });

  it('should return false for an empty string', () => {
    expect(isValidEmail('')).toBe(false);
  });
});

Mocking met jest.fn()

jest.fn() maakt een mockfunctie — een nepimplementatie die bijhoudt hoe deze is aangeroepen. Je geeft mockfuncties als props door aan componenten of injecteert ze als afhankelijkheden om de te testen code los te koppelen van de echte samenwerkende onderdelen.

Controleer na het uitvoeren van de te testen code de mock met matchers zoals toHaveBeenCalled(), toHaveBeenCalledWith(args) en toHaveBeenCalledTimes(n). Zo kun je controleren of je code externe API's of callbacks correct aanroept zonder daadwerkelijk netwerkaanvragen te doen.

// Test that a submit handler calls the API with the correct arguments
const mockSubmit = jest.fn().mockResolvedValue({ success: true });

await handleFormSubmit({ email: 'user@test.com' }, mockSubmit);

expect(mockSubmit).toHaveBeenCalledTimes(1);
expect(mockSubmit).toHaveBeenCalledWith({ email: 'user@test.com' });

// Mock return values
const mockFetch = jest.fn().mockResolvedValue([{ id: '1', title: 'Post' }]);
const posts = await fetchPosts(mockFetch);
expect(posts).toHaveLength(1);

Modules mocken met jest.mock()

jest.mock('module-name') vervangt een volledige module door een automatisch gemockte versie waarin alle geëxporteerde functies jest.fn() worden. Dit is essentieel voor het mocken van native modules, die niet kunnen worden uitgevoerd in de Jest Node.js-omgeving.

Roep jest.mock() bovenaan het testbestand aan. Jest verplaatst mockaanroepen automatisch naar het begin van het bestand, zodat ze zijn ingesteld voordat imports worden uitgevoerd. Gebruik jest.requireActual om delen van de echte module te behouden.

// Mock expo-location
jest.mock('expo-location', () => ({
  requestForegroundPermissionsAsync: jest.fn().mockResolvedValue({ status: 'granted' }),
  getCurrentPositionAsync: jest.fn().mockResolvedValue({
    coords: { latitude: 37.78825, longitude: -122.4324 },
  }),
}));

// Mock React Navigation
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ navigate: jest.fn() }),
  useRoute: () => ({ params: { userId: '123' } }),
}));

Rapporten over codedekking

Jest kan c dedekking meten — welk percentage van je code door tests wordt uitgevoerd. Voer jest --coverage uit om een dekkingsrapport in de terminal en een HTML-rapport in coverage/lcov-report/index.html te genereren.

Het rapport toont vier metingen per bestand: instructies (uitgevoerde coderegels), vertakkingen (doorlopen if/else-paden), functies (aangeroepen functies) en regels. Richt je op het afdekken van kritieke bedrijfslogica, foutafhandelingspaden en hulpfuncties — een dekking van 80-90% daarvan is waardevoller dan 100% dekking van eenvoudige rendercomponenten.

# Run tests with coverage report
npx jest --coverage

# Coverage thresholds in jest.config.js
module.exports = {
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 70,
      functions: 80,
      lines: 80,
    },
  },
};

Instellen en opruimen met beforeEach en afterEach

beforeEach en afterEach voeren instel- en opruimcode uit rond elke test in een describe-blok. Gebruik beforeEach om mocks te resetten, testgegevens te initialiseren of een nieuwe componentinstantie te maken. Gebruik afterEach om timers, abonnementen of asynchrone bewerkingen op te ruimen.

beforeAll en afterAll worden één keer uitgevoerd vóór of na alle tests in een describe-blok — handig voor kostbare instellingen, zoals het openen van een databaseverbinding die door meerdere tests wordt gedeeld.

describe('AuthService', () => {
  let mockStorage: Record<string, string>;

  beforeEach(() => {
    // Fresh state before each test
    mockStorage = {};
    jest.clearAllMocks(); // Reset mock call counts
  });

  afterEach(() => {
    // Clean up any timers started during the test
    jest.useRealTimers();
  });

  it('should save the token to storage on sign in', async () => {
    await signIn('user@test.com', 'password', mockStorage);
    expect(mockStorage['authToken']).toBeDefined();
  });
});

Asynchrone code testen met async/await

De meeste React Native-bewerkingen zijn asynchroon. Jest ondersteunt async/await rechtstreeks in testfuncties. Retourneer de promise (of gebruik async/await), zodat Jest weet dat het moet wachten totdat deze is opgelost voordat de test als geslaagd wordt gemarkeerd.

Gebruik voor code met setTimeout of setInterval jest.useFakeTimers() om de tijd in tests te beheren. Roep jest.runAllTimers() aan om alle wachtende timers versneld uit te voeren zonder echt te wachten.

// Testing async functions
it('should return sorted posts from the API', async () => {
  const posts = await fetchAndSortPosts();
  expect(posts[0].createdAt).toBeGreaterThan(posts[1].createdAt);
});

// Testing code with timers
it('should call the callback after 1 second', () => {
  jest.useFakeTimers();
  const callback = jest.fn();

  scheduleCallback(callback, 1000);
  expect(callback).not.toHaveBeenCalled();

  jest.advanceTimersByTime(1000);
  expect(callback).toHaveBeenCalledTimes(1);
});

Korte controle

Test je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd: hoe Jest in React Native- en Expo-projecten wordt geconfigureerd via presets, hoe je unit-tests voor pure functies schrijft met het arrange-act-assert-patroon en hoe je functies en modules mockt met jest.fn() en jest.mock() om de te testen code te isoleren. Hierna renderen we React Native-componenten in tests met React Native Testing Library.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Jest instellen in een React Native-project” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Jest instellen in een React Native-project”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “Jest instellen in een React Native-project”?

Configureer Jest met de react-native-preset, voer uw eerste testbestand uit, leer de API's test, describe en expect kennen en stel rapportage van codedekking in. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Jest instellen in een React Native-project”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Jest instellen in een React Native-project
Componenten renderen met React Native Testing Library
Gebeurtenissen uitvoeren en gebruikersinteractie testen
Native modules en asynchrone code mocken

← Terug naar React Native Academy