21 juli 2025Nederlands

Beheers geavanceerde Jest-testpatronen om betrouwbaardere en onderhoudbare software te bouwen. Verken technieken zoals mocking, snapshot-testen, custom matchers en meer voor wereldwijde ontwikkelteams.

Jest: Geavanceerde Testpatronen voor Robuuste Software

In het snelle softwareontwikkelingslandschap van vandaag is het waarborgen van de betrouwbaarheid en stabiliteit van uw codebase van het grootste belang. Hoewel Jest de de facto standaard is geworden voor JavaScript-testen, ontsluit het overstijgen van eenvoudige unit-tests een nieuw niveau van vertrouwen in uw applicaties. Dit bericht duikt in geavanceerde Jest-testpatronen die essentieel zijn voor het bouwen van robuuste software, gericht op een wereldwijd publiek van ontwikkelaars.

Waarom verder gaan dan eenvoudige unit-tests?

Eenvoudige unit-tests verifiëren individuele componenten in isolatie. Echte applicaties zijn echter complexe systemen waar componenten met elkaar interageren. Geavanceerde testpatronen pakken deze complexiteiten aan door ons in staat te stellen om:

Complexe afhankelijkheden te simuleren.
UI-wijzigingen betrouwbaar vast te leggen.
Expressievere en beter onderhoudbare tests te schrijven.
De testdekking en het vertrouwen in integratiepunten te verbeteren.
Test-Driven Development (TDD) en Behavior-Driven Development (BDD) workflows te faciliteren.

Mocking en Spies onder de knie krijgen

Mocking is cruciaal voor het isoleren van de te testen unit door de afhankelijkheden ervan te vervangen door gecontroleerde substituten. Jest biedt hiervoor krachtige tools:

`jest.fn()`: De basis van mocks en spies

jest.fn() creëert een mock-functie. U kunt de aanroepen, argumenten en geretourneerde waarden ervan bijhouden. Dit is de bouwsteen voor meer geavanceerde mocking-strategieën.

Voorbeeld: Functieaanroepen bijhouden

            // component.js
export const fetchData = () => {
  // Simuleert een API-aanroep
  return Promise.resolve({ data: 'some data' });
};

export const processData = async (fetcher) => {
  const result = await fetcher();
  return `Processed: ${result.data}`;
};

// component.test.js
import { processData } from './component';

test('should process data correctly', async () => {
  const mockFetcher = jest.fn().mockResolvedValue({ data: 'mocked data' });
  const result = await processData(mockFetcher);
  expect(result).toBe('Processed: mocked data');
  expect(mockFetcher).toHaveBeenCalledTimes(1);
  expect(mockFetcher).toHaveBeenCalledWith();
});

`jest.spyOn()`: Observeren zonder te vervangen

jest.spyOn() stelt u in staat om aanroepen naar een methode op een bestaand object te observeren zonder noodzakelijkerwijs de implementatie ervan te vervangen. U kunt de implementatie indien nodig ook mocken.

Voorbeeld: Een modulemethode bespioneren

            // logger.js
export const logInfo = (message) => {
  console.log(`INFO: ${message}`);
};

// service.js
import { logInfo } from './logger';

export const performTask = (taskName) => {
  logInfo(`Starting task: ${taskName}`);
  // ... taaklogica ...
  logInfo(`Task ${taskName} completed.`);
};

// service.test.js
import { performTask } from './service';
import * as logger from './logger';

test('should log task start and completion', () => {
  const logSpy = jest.spyOn(logger, 'logInfo');

  performTask('backup');

  expect(logSpy).toHaveBeenCalledTimes(2);
  expect(logSpy).toHaveBeenCalledWith('Starting task: backup');
  expect(logSpy).toHaveBeenCalledWith('Task backup completed.');

  logSpy.mockRestore(); // Belangrijk om de oorspronkelijke implementatie te herstellen
});

Module-imports mocken

Jest's mogelijkheden voor het mocken van modules zijn uitgebreid. U kunt volledige modules of specifieke exports mocken.

Voorbeeld: Een externe API-client mocken

            // api.js
import axios from 'axios';

export const getUser = async (userId) => {
  const response = await axios.get(`/api/users/${userId}`);
  return response.data;
};

// user-service.js
import { getUser } from './api';

export const getUserFullName = async (userId) => {
  const user = await getUser(userId);
  return `${user.firstName} ${user.lastName}`;
};

// user-service.test.js
import { getUserFullName } from './user-service';
import * as api from './api';

// Mock de volledige api-module
jest.mock('./api');

test('should get full name using mocked API', async () => {
  // Mock de specifieke functie van de gemockte module
  api.getUser.mockResolvedValue({ id: 1, firstName: 'Ada', lastName: 'Lovelace' });

  const fullName = await getUserFullName(1);

  expect(fullName).toBe('Ada Lovelace');
  expect(api.getUser).toHaveBeenCalledTimes(1);
  expect(api.getUser).toHaveBeenCalledWith(1);
});

Automatisch mocken vs. handmatig mocken

Jest mockt automatisch Node.js-modules. Voor ES-modules of aangepaste modules heeft u mogelijk jest.mock() nodig. Voor meer controle kunt u __mocks__-mappen aanmaken.

Mock-implementaties

U kunt aangepaste implementaties voor uw mocks aanleveren.

Voorbeeld: Mocken met een aangepaste implementatie

            // math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// calculator.js
import { add, subtract } from './math';

export const calculate = (operation, a, b) => {
  if (operation === 'add') {
    return add(a, b);
  } else if (operation === 'subtract') {
    return subtract(a, b);
  }
  return null;
};

// calculator.test.js
import { calculate } from './calculator';
import * as math from './math';

// Mock de volledige math-module
jest.mock('./math');

test('should perform addition using mocked math add', () => {
  // Bied een mock-implementatie voor de 'add'-functie
  math.add.mockImplementation((a, b) => a + b + 10); // Voeg 10 toe aan het resultaat
  math.subtract.mockReturnValue(5); // Mock ook subtract

  const result = calculate('add', 5, 3);

  expect(math.add).toHaveBeenCalledWith(5, 3);
  expect(result).toBe(18); // 5 + 3 + 10

  const subResult = calculate('subtract', 10, 2);
  expect(math.subtract).toHaveBeenCalledWith(10, 2);
  expect(subResult).toBe(5);
});

Snapshot-testen: UI en configuratie behouden

Snapshot-tests zijn een krachtige functie voor het vastleggen van de output van uw componenten of configuraties. Ze zijn met name nuttig voor UI-testen of het verifiëren van complexe datastructuren.

Hoe snapshot-testen werkt

De eerste keer dat een snapshot-test wordt uitgevoerd, creëert Jest een .snap-bestand met een geserialiseerde representatie van de geteste waarde. Bij volgende uitvoeringen vergelijkt Jest de huidige output met de opgeslagen snapshot. Als ze verschillen, mislukt de test, wat u waarschuwt voor onbedoelde wijzigingen. Dit is van onschatbare waarde voor het detecteren van regressies in UI-componenten in verschillende regio's of locales.

Voorbeeld: Een React-component snapshotten

Stel dat u een React-component heeft:

            // UserProfile.js
import React from 'react';

const UserProfile = ({ name, email, isActive }) => (
  <div>
    <h2>{name}</h2>
    <p><strong>Email:</strong> {email}</p>
    <p><strong>Status:</strong> {isActive ? 'Active' : 'Inactive'}</p>
  </div>
);

export default UserProfile;

// UserProfile.test.js
import React from 'react';
import renderer from 'react-test-renderer'; // Voor snapshots van React-componenten
import UserProfile from './UserProfile';

test('renders UserProfile correctly', () => {
  const user = {
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    isActive: true,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

test('renders inactive UserProfile correctly', () => {
  const user = {
    name: 'John Smith',
    email: 'john.smith@example.com',
    isActive: false,
  };
  const component = renderer.create(
    <UserProfile {...user} />
  );
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot('inactive user profile'); // Benoemde snapshot
});

Na het uitvoeren van de tests zal Jest een UserProfile.test.js.snap-bestand aanmaken. Wanneer u het component bijwerkt, moet u de wijzigingen controleren en mogelijk de snapshot bijwerken door Jest uit te voeren met de --updateSnapshot- of -u-vlag.

Best practices voor snapshot-testen

Gebruik voor UI-componenten en configuratiebestanden: Ideaal om ervoor te zorgen dat UI-elementen renderen zoals verwacht en dat configuratie niet onbedoeld verandert.
Controleer snapshots zorgvuldig: Accepteer snapshot-updates niet blindelings. Controleer altijd wat er is gewijzigd om ervoor te zorgen dat de aanpassingen opzettelijk zijn.
Vermijd snapshots voor vaak veranderende data: Als data snel verandert, kunnen snapshots broos worden en tot overmatige ruis leiden.
Gebruik benoemde snapshots: Voor het testen van meerdere statussen van een component bieden benoemde snapshots meer duidelijkheid.

Custom Matchers: De leesbaarheid van tests verbeteren

Jest's ingebouwde matchers zijn uitgebreid, maar soms moet u specifieke, niet-gedekte voorwaarden controleren. Met custom matchers kunt u uw eigen assertielogica creëren, waardoor uw tests expressiever en leesbaarder worden.

Custom matchers maken

U kunt het expect-object van Jest uitbreiden met uw eigen matchers.

Voorbeeld: Controleren op een geldig e-mailformaat

In uw Jest-setupbestand (bijv. jest.setup.js, geconfigureerd in jest.config.js):

            // jest.setup.js

expect.extend({
  toBeValidEmail(received) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const pass = emailRegex.test(received);

    if (pass) {
      return {
        message: () => `expected ${received} not to be a valid email`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be a valid email`,
        pass: false,
      };
    }
  },
});

// In je jest.config.js
// module.exports = { setupFilesAfterEnv: ['/jest.setup.js'] };

In uw testbestand:

            // validation.test.js

test('should validate email formats', () => {
  expect('test@example.com').toBeValidEmail();
  expect('invalid-email').not.toBeValidEmail();
  expect('another.test@sub.domain.co.uk').toBeValidEmail();
});

Voordelen van Custom Matchers

Verbeterde leesbaarheid: Tests worden declaratiever en geven aan *wat* er wordt getest in plaats van *hoe*.
Herbruikbaarheid van code: Vermijd het herhalen van complexe assertielogica in meerdere tests.
Domeinspecifieke asserties: Stem asserties af op de specifieke domeinvereisten van uw applicatie.

Asynchrone operaties testen

JavaScript is sterk asynchroon. Jest biedt uitstekende ondersteuning voor het testen van promises en async/await.

`async/await` gebruiken

Dit is de moderne en meest leesbare manier om asynchrone code te testen.

Voorbeeld: Een asynchrone functie testen

            // dataService.js
export const fetchUserData = async (userId) => {
  // Simuleer het ophalen van data na een vertraging
  await new Promise(resolve => setTimeout(resolve, 50));
  if (userId === 1) {
    return { id: 1, name: 'Alice' };
  } else {
    throw new Error('User not found');
  }
};

// dataService.test.js
import { fetchUserData } from './dataService';

test('fetches user data correctly', async () => {
  const user = await fetchUserData(1);
  expect(user).toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user', async () => {
  await expect(fetchUserData(2)).rejects.toThrow('User not found');
});

`.resolves` en `.rejects` gebruiken

Deze matchers vereenvoudigen het testen van promise-resoluties en -rejecties.

Voorbeeld: .resolves/.rejects gebruiken

            // dataService.test.js (vervolg)

test('fetches user data with .resolves', () => {
  return expect(fetchUserData(1)).resolves.toEqual({ id: 1, name: 'Alice' });
});

test('throws error for non-existent user with .rejects', () => {
  return expect(fetchUserData(2)).rejects.toThrow('User not found');
});

Timers beheren

Voor functies die setTimeout of setInterval gebruiken, biedt Jest timercontrole.

Voorbeeld: Timers beheren

            // delayedGreeter.js
export const greetAfterDelay = (name, callback) => {
  setTimeout(() => {
    callback(`Hello, ${name}!`);
  }, 1000);
};

// delayedGreeter.test.js
import { greetAfterDelay } from './delayedGreeter';

jest.useFakeTimers(); // Schakel nep-timers in

test('greets after delay', () => {
  const mockCallback = jest.fn();
  greetAfterDelay('World', mockCallback);

  // Versnel timers met 1000ms
  jest.advanceTimersByTime(1000);

  expect(mockCallback).toHaveBeenCalledTimes(1);
  expect(mockCallback).toHaveBeenCalledWith('Hello, World!');
});

// Herstel echte timers indien elders nodig
jest.useRealTimers();

Testorganisatie en -structuur

Naarmate uw testsuite groeit, wordt organisatie cruciaal voor onderhoudbaarheid.

Describe- en It-blokken

Gebruik describe om gerelateerde tests te groeperen en it (of test) voor individuele testgevallen. Deze structuur weerspiegelt de modulariteit van de applicatie.

Voorbeeld: Gestructureerde tests

            describe('User Authentication Service', () => {
  let authService;

  beforeEach(() => {
    // Stel mocks of service-instanties in voor elke test
    authService = require('./authService');
    jest.spyOn(authService, 'login').mockImplementation(() => Promise.resolve({ token: 'fake_token' }));
  });

  afterEach(() => {
    // Ruim mocks op
    jest.restoreAllMocks();
  });

  describe('login functionality', () => {
    it('should successfully log in a user with valid credentials', async () => {
      const result = await authService.login('user@example.com', 'password123');
      expect(result.token).toBeDefined();
      // ... meer assertions ...
    });

    it('should fail login with invalid credentials', async () => {
      jest.spyOn(authService, 'login').mockRejectedValue(new Error('Invalid credentials'));
      await expect(authService.login('user@example.com', 'wrong_password')).rejects.toThrow('Invalid credentials');
    });
  });

  describe('logout functionality', () => {
    it('should clear user session', async () => {
      // Test uitloglogica...
    });
  });
});

Setup- en teardown-hooks

beforeAll: Wordt één keer uitgevoerd vóór alle tests in een describe-blok.
afterAll: Wordt één keer uitgevoerd na alle tests in een describe-blok.
beforeEach: Wordt uitgevoerd vóór elke test in een describe-blok.
afterEach: Wordt uitgevoerd na elke test in een describe-blok.

Deze hooks zijn essentieel voor het opzetten van mock-data, databaseverbindingen of het opruimen van resources tussen tests.

Testen voor een wereldwijd publiek

Bij het ontwikkelen van applicaties voor een wereldwijd publiek, worden de testoverwegingen uitgebreider:

Internationalisatie (i18n) en lokalisatie (l10n)

Zorg ervoor dat uw UI en berichten zich correct aanpassen aan verschillende talen en regionale formaten.

Snapshotten van gelokaliseerde UI: Test of verschillende taalversies van uw UI correct renderen met behulp van snapshot-tests.
Locale-data mocken: Mock bibliotheken zoals react-intl of i18next om het gedrag van componenten met verschillende locale-berichten te testen.
Datum-, tijd- en valutumnotatie: Test of deze correct worden afgehandeld met behulp van custom matchers of door internationalisatiebibliotheken te mocken. Bijvoorbeeld, verifiëren dat een datum opgemaakt voor Duitsland (DD.MM.YYYY) anders wordt weergegeven dan voor de VS (MM/DD/YYYY).

Voorbeeld: Gelokaliseerde datumnotatie testen

            // dateUtils.js
export const formatLocalizedDate = (date, locale) => {
  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' }).format(date);
};

// dateUtils.test.js
import { formatLocalizedDate } from './dateUtils';

test('formats date correctly for US locale', () => {
  const date = new Date(2023, 10, 15); // 15 november 2023
  expect(formatLocalizedDate(date, 'en-US')).toBe('11/15/2023');
});

test('formats date correctly for German locale', () => {
  const date = new Date(2023, 10, 15);
  expect(formatLocalizedDate(date, 'de-DE')).toBe('15.11.2023');
});

Tijdzonebewustzijn

Test hoe uw applicatie omgaat met verschillende tijdzones, vooral voor functies zoals planning of real-time updates. Het mocken van de systeemklok of het gebruik van bibliotheken die tijdzones abstraheren kan nuttig zijn.

Culturele nuances in data

Overweeg hoe getallen, valuta's en andere datarepresentaties anders kunnen worden waargenomen of verwacht in verschillende culturen. Custom matchers kunnen hier bijzonder nuttig zijn.

Geavanceerde technieken en strategieën

Test-Driven Development (TDD) en Behavior-Driven Development (BDD)

Jest sluit goed aan bij TDD (Red-Green-Refactor) en BDD (Given-When-Then) methodologieën. Schrijf tests die het gewenste gedrag beschrijven voordat u de implementatiecode schrijft. Dit zorgt ervoor dat code vanaf het begin met testbaarheid in gedachten wordt geschreven.

Integratietesten met Jest

Hoewel Jest uitblinkt in unit-tests, kan het ook worden gebruikt voor integratietesten. Minder afhankelijkheden mocken of tools zoals Jest's runInBand-optie kunnen hierbij helpen.

Voorbeeld: API-interactie testen (vereenvoudigd)

            // apiService.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export const createProduct = async (productData) => {
  const response = await axios.post(`${API_BASE_URL}/products`, productData);
  return response.data;
};

// apiService.test.js (Integratietest)
import axios from 'axios';
import { createProduct } from './apiService';

// Mock axios voor integratietesten om de netwerklaag te controleren
jest.mock('axios');

test('creates a product via API', async () => {
  const mockProduct = { id: 1, name: 'Gadget' };
  const responseData = { success: true, product: mockProduct };

  axios.post.mockResolvedValue({
    data: responseData,
    status: 201,
    headers: { 'content-type': 'application/json' },
  });

  const newProductData = { name: 'Gadget', price: 99.99 };
  const result = await createProduct(newProductData);

  expect(axios.post).toHaveBeenCalledWith(`${process.env.API_BASE_URL || 'https://api.example.com'}/products`, newProductData);
  expect(result).toEqual(responseData);
});

Parallellisme en configuratie

Jest kan tests parallel uitvoeren om de uitvoering te versnellen. Configureer dit in uw jest.config.js. Het instellen van maxWorkers regelt bijvoorbeeld het aantal parallelle processen.

Dekkingsrapporten (Coverage reports)

Gebruik Jest's ingebouwde dekkingsrapportage om delen van uw codebase te identificeren die niet worden getest. Voer tests uit met --coverage om gedetailleerde rapporten te genereren.

            jest --coverage

Het beoordelen van dekkingsrapporten helpt ervoor te zorgen dat uw geavanceerde testpatronen kritieke logica effectief dekken, inclusief internationalisatie- en lokalisatiecodepaden.

Conclusie

Het beheersen van geavanceerde Jest-testpatronen is een belangrijke stap op weg naar het bouwen van betrouwbare, onderhoudbare en hoogwaardige software voor een wereldwijd publiek. Door effectief gebruik te maken van mocking, snapshot-testen, custom matchers en asynchrone testtechnieken, kunt u de robuustheid van uw testsuite verbeteren en meer vertrouwen krijgen in het gedrag van uw applicatie in diverse scenario's en regio's. Het omarmen van deze patronen stelt ontwikkelteams wereldwijd in staat om uitzonderlijke gebruikerservaringen te leveren.

Begin vandaag nog met het integreren van deze geavanceerde technieken in uw workflow om uw JavaScript-testpraktijken naar een hoger niveau te tillen.