Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Skrive enhetstester for utvidelser

Implementer enhetstester for logikken i utvidelsen ved hjelp av populære JavaScript-testrammeverk for å sikre pålitelighet.

Leksjon 2 av 411 trinn

Skrive enhetstester for utvidelser er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Introduksjon til enhetstesting

Velkommen! I denne leksjonen skal vi se nærmere på enhetstesting av nettleserutvidelser. Enhetstesting er en metode for å teste små, isolerte deler av koden, ofte kalt "enheter".

For utvidelser betyr dette at De kan teste individuelle funksjoner eller moduler uten å måtte kjøre hele nettlesermiljøet. Målet er å sikre at hver del fungerer korrekt på egen hånd.

Hvorfor teste utvidelser?

Testing er avgjørende for å bygge robuste nettleserutvidelser. Her er hvorfor:

Pålitelighet: Oppdager feil tidlig og sikrer at utvidelsen fungerer som forventet.
Vedlikeholdbarhet: Gjør fremtidige endringer tryggere og forhindrer utilsiktede feil (regresjoner).
API-endringer: Gjør det enklere å tilpasse seg oppdateringer i nettleser-API-er (for eksempel endringer i Manifest V3).
Kompleks logikk: Sikrer at krevende logikk i bakgrunns- eller innholdsskript fungerer korrekt.

Velg testrammeverk

Flere JavaScript-rammeverk hjelper Dem med å skrive og kjøre tester. Populære alternativer er blant annet:

Jest: En komplett testløsning fra Facebook, kjent for å være enkel å bruke og ha innebygd støtte for mocking.
Mocha: En fleksibel testrunner, ofte brukt sammen med et assertion-bibliotek som Chai.
Vitest: Et raskt, moderne alternativ bygget på Vite.

I denne leksjonen bruker vi Jest på grunn av populariteten og de omfattende funksjonene.

Konfigurer Jest for testing

For å komme i gang oppretter De en prosjektmappe og initialiserer den med npm. Installer deretter Jest som en utviklingsavhengighet:

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

Legg deretter til et testskript i filen package.json, slik at De enkelt kan kjøre tester:

{
  "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
  }
}

Test ren JavaScript-logikk

La oss skrive en enkel hjelpefunksjon som kan være en del av logikken i utvidelsen. Opprett en fil med navnet 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 };

Skriv Deres første test

Opprett nå en testfil med navnet utils.test.js. Jest finner automatisk filer som slutter på .test.js eller .spec.js.

Vi importerer funksjonene våre og bruker Jest-syntaksen test (eller it) og expect til å definere og kontrollere testene. Prøv å kjøre dette eksempelet!

// 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

Utfordringen med Chrome-API-er

Nettleserutvidelser er i stor grad avhengige av chrome.*-API-ene (for eksempel chrome.storage og chrome.tabs). Disse API-ene er bare tilgjengelige i et nettlesermiljø.

Når enhetstester kjøres utenfor en nettleser (for eksempel med Node.js-basert Jest), vil chrome-objektet være udefinert. For å teste logikk som bruker disse API-ene, må vi mocke dem.

Mocking betyr å opprette en simulert versjon av et objekt eller en funksjon for å kontrollere oppførselen under en test.

Mocking av chrome.storage

La oss opprette en hjelpefunksjon som bruker chrome.storage.local. Denne funksjonen vil vanligvis ligge i bakgrunnsskriptet eller i en annen modul.

Først hjelpefunksjonen vår (for eksempel i 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 };

Testing med mockede API-er

La oss nå skrive en test for storageUtils.js. Vi oppretter en mock for chrome.storage.local før hver test for å simulere oppførselen.

Jests jest.fn() egner seg perfekt til å opprette mock-funksjoner og spore kallene deres. Prøv å kjøre denne testen!

// 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

Kort sjekk: Enhetstesting

De har lært om enhetstesting og hvordan nettleser-API-er kan mockes. Hvilket av følgende utsagn om enhetstesting av logikk i nettleserutvidelser er SANT?

Besvar den i den interaktive leksjonen

Oppsummering: Enhetstesting

I denne leksjonen har De lært:

Hvor viktig enhetstesting er for nettleserutvidelser.
Hvordan De konfigurerer et testmiljø med Jest.
Hvordan De skriver enhetstester for rene JavaScript-funksjoner.
Konseptet og praksisen med å mocke chrome.*-API-er for å teste utvidelseslogikk utenfor nettleseren.

Enhetstesting er en viktig ferdighet for å bygge robuste og vedlikeholdbare utvidelser. Fortsett å øve, slik at kjernefunksjonaliteten i utvidelsen alltid er solid!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Skrive enhetstester for utvidelser» gratis?

Ja – hele teksten i «Skrive enhetstester for utvidelser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Skrive enhetstester for utvidelser»?

Implementer enhetstester for logikken i utvidelsen ved hjelp av populære JavaScript-testrammeverk for å sikre pålitelighet. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Skrive enhetstester for utvidelser»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Feilsøke utvidelseskomponenter
Skrive enhetstester for utvidelser
Strategier for ytelsesoptimalisering
Logging, feilrapportering og diagnostikk

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)