Browserextensies ontwikkelen (Chrome en Edge) · Les

Unittests voor extensies schrijven

Implementeer unittests voor de logica van uw extensie met populaire JavaScript-testframeworks om de betrouwbaarheid te waarborgen.

Les 2 van 411 stappen

Unittests voor extensies schrijven is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Inleiding tot unit-tests

Welkom! In deze les gaan we dieper in op unit-tests voor browserextensies. Unit-tests zijn een manier om kleine, geïsoleerde onderdelen van je code te testen. Deze worden vaak "units" genoemd.

Voor extensies betekent dit dat je afzonderlijke functies of modules kunt testen zonder de volledige browseromgeving te hoeven uitvoeren. Zo controleer je of elk onderdeel zelfstandig correct werkt.

Waarom extensies testen?

Testen is essentieel voor het bouwen van robuuste browserextensies. Dit is waarom:

Betrouwbaarheid: je vindt bugs vroeg, zodat je extensie werkt zoals verwacht.
Onderhoudbaarheid: toekomstige wijzigingen worden veiliger en veroorzaken minder snel onbedoelde defecten (regressies).
API-wijzigingen: je kunt je gemakkelijker aanpassen aan updates van browser-API's, zoals wijzigingen in Manifest V3.
Complexe logica: je controleert of ingewikkelde logica in de achtergrond- of contentscripts correct werkt.

Kies je testframework

Verschillende JavaScript-frameworks helpen je bij het schrijven en uitvoeren van tests. Populaire keuzes zijn:

Jest: een complete testoplossing van Facebook, die bekendstaat om het gebruiksgemak en de ingebouwde ondersteuning voor mocks.
Mocha: een flexibel testprogramma, dat vaak wordt gecombineerd met een assertiebibliotheek zoals Chai.
Vitest: een snel, modern alternatief dat op Vite is gebaseerd.

In deze les gebruiken we Jest vanwege de populariteit en uitgebreide functies.

Jest instellen voor tests

Maak om te beginnen een projectmap en initialiseer deze met npm. Installeer Jest vervolgens als ontwikkelafhankelijkheid:

npm init -y
npm install --save-dev jest

Voeg daarna een testscript toe aan je package.json-bestand, zodat je tests eenvoudig kunt uitvoeren:

{
  "name": "my-extension-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.0.0" // Version may vary
  }
}

Pure JavaScript-logica testen

We schrijven een eenvoudige hulpfunctie die onderdeel kan zijn van de logica van je extensie. Maak een bestand met de naam utils.js:

// utils.js
function sum(a, b) {
  return a + b;
}

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = { sum, capitalize };

Je eerste test schrijven

Maak nu een testbestand met de naam utils.test.js. Jest vindt automatisch bestanden waarvan de naam eindigt op .test.js of .spec.js.

We importeren onze functies en gebruiken de syntaxis van Jest voor test (of it) en expect om onze tests te definiëren en te controleren. Probeer dit voorbeeld uit te voeren!

// utils.test.js
const { sum, capitalize } = require('./utils');

test('sums two numbers correctly', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
});

test('capitalizes a string', () => {
  expect(capitalize('hello')).toBe('Hello');
  expect(capitalize('world')).toBe('World');
  expect(capitalize('')).toBe('');
});

// To run these tests, execute: npm test

De uitdaging van Chrome-API's

Browserextensies zijn sterk afhankelijk van de chrome.*-API's (bijvoorbeeld chrome.storage en chrome.tabs). Deze API's zijn alleen beschikbaar binnen een browseromgeving.

Wanneer je unit-tests buiten een browser uitvoert, bijvoorbeeld met Node.js-gebaseerde Jest, is het object chrome niet gedefinieerd. Om logica te testen die deze API's gebruikt, moeten we ze mocken.

Mocken betekent dat je een gesimuleerde versie van een object of functie maakt, zodat je het gedrag ervan tijdens een test kunt bepalen.

chrome.storage mocken

We maken een hulpfunctie die chrome.storage.local gebruikt. Deze functie zou normaal gesproken in je achtergrondscript of een andere module staan.

Eerst onze hulpfunctie (bijvoorbeeld in storageUtils.js):

// storageUtils.js
async function saveSetting(key, value) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    await chrome.storage.local.set({ [key]: value });
    return true;
  }
  // Fallback for non-browser environments or missing API
  console.warn('chrome.storage.local not available');
  return false;
}

async function getSetting(key) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    const result = await chrome.storage.local.get(key);
    return result[key];
  }
  // Fallback
  console.warn('chrome.storage.local not available');
  return undefined;
}

module.exports = { saveSetting, getSetting };

Testen met gemockte API's

We schrijven nu een test voor storageUtils.js. Voor elke test maken we een mock van chrome.storage.local om het gedrag ervan te simuleren.

De jest.fn() van Jest is ideaal om mockfuncties te maken en hun aanroepen bij te houden. Probeer deze test uit te voeren!

// storageUtils.test.js
const { saveSetting, getSetting } = require('./storageUtils');

// Mock chrome.storage.local globally for tests
const mockStorage = {};
global.chrome = {
  storage: {
    local: {
      set: jest.fn(async (obj) => {
        Object.assign(mockStorage, obj);
        return Promise.resolve();
      }),
      get: jest.fn(async (key) => {
        return Promise.resolve({ [key]: mockStorage[key] });
      }),
    },
  },
};

beforeEach(() => {
  // Reset mock storage and clear Jest mock calls before each test
  for (const key in mockStorage) { delete mockStorage[key]; }
  chrome.storage.local.set.mockClear();
  chrome.storage.local.get.mockClear();
});

test('saveSetting saves data to chrome.storage.local', async () => {
  await saveSetting('username', 'CoddyKit');
  expect(chrome.storage.local.set).toHaveBeenCalledWith({ username: 'CoddyKit' });
  expect(mockStorage.username).toBe('CoddyKit');
});

test('getSetting retrieves data from chrome.storage.local', async () => {
  mockStorage.username = 'CoddyKit'; // Pre-set mock storage
  const username = await getSetting('username');
  expect(chrome.storage.local.get).toHaveBeenCalledWith('username');
  expect(username).toBe('CoddyKit');
});

// To run these tests, execute: npm test

Korte controle: unit-tests

Je hebt geleerd wat unit-tests zijn en hoe je browser-API's kunt mocken. Welke van de volgende uitspraken over het testen van logica van browserextensies is WAAR?

Beantwoord dit in de interactieve les

Samenvatting: unit-tests

In deze les heb je geleerd:

waarom unit-tests belangrijk zijn voor browserextensies;
hoe je met Jest een testomgeving instelt;
hoe je unit-tests schrijft voor pure JavaScript-functies;
wat het concept van mocken inhoudt en hoe je chrome.*-API's mockt om logica van extensies buiten de browser te testen.

Unit-tests zijn een essentiële vaardigheid voor het bouwen van robuuste en onderhoudbare extensies. Blijf oefenen, zodat de kernlogica van je extensie altijd betrouwbaar is!

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: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Unittests voor extensies schrijven” gratis?

Ja — de volledige tekst van “Unittests voor extensies schrijven” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “Unittests voor extensies schrijven”?

Implementeer unittests voor de logica van uw extensie met populaire JavaScript-testframeworks om de betrouwbaarheid te waarborgen. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) 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 Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) 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 2 van 4.

Hoe lang duurt de les “Unittests voor extensies schrijven”?

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 Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) 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

← Terug naar Browserextensies ontwikkelen (Chrome en Edge)