Opsætning af testmiljø

Før du installerer Jest, skal du have et Node.js-projekt. Hvis du ikke har et, kan du nemt oprette det.

Gå til din projektmappe i terminalen, og kør:

Denne kommando opretter en package.json-fil, som administrerer projektets afhængigheder og scripts.

Lad os nu installere Jest. Da jQuery ofte interagerer med browserens DOM (Document Object Model), skal vi også bruge jest-environment-jsdom. JSDOM leverer et browserlignende miljø i Node.js, så din jQuery-kode kan manipulere en virtuel DOM.

Installer dem som udviklingsafhængigheder:

Det føjer Jest og JSDOM til din package.json.

For at fortælle Jest, at den skal bruge JSDOM, skal du konfigurere den. Det kan du gøre ved at tilføje et test-script til din package.json eller ved at oprette en jest.config.js-fil.

Mulighed 1: I package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

Flaget --env=jsdom sikrer, at Jest kører tests i et JSDOM-miljø.

Jest leder efter testfiler i en __tests__-mappe eller filer, der slutter med .test.js (eller .spec.js). Lad os oprette en simpel testfil.

Opret en mappe med navnet __tests__ i projektets rodmappe, og tilføj derefter en fil som __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe grupperer relaterede tests, og test (eller it) definerer en individuel testsag.

For at teste jQuery-kode skal du importere selve jQuery i din testfil. Du kan installere jQuery via npm: npm install jquery.

Derefter kan du importere den i din testfil:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Påstande er den måde, du kontrollerer, at din kode opfører sig korrekt på. Jest bruger funktionen expect() sammen med matchere til at lave påstande.

Her er et simpelt JavaScript-eksempel (ikke specifikt for jQuery, men det demonstrerer påstande):

Jest tilbyder et omfattende udvalg af matchere. Her er nogle almindelige, som du kommer til at bruge:

• .toBe(value): Kontrollerer nøjagtig lighed (som ===).
• .toEqual(value): Kontrollerer dyb lighed mellem objekter eller arrays.
• .not.toBe(value): Kontrollerer ulighed.
• .toBeTruthy() / .toBeFalsy(): Kontrollerer, om en værdi er sand eller falsk.
• .toContain(item): Kontrollerer, om et array eller en streng indeholder et element.

I jQuery kombinerer du ofte disse med jQuery-metoder, f.eks. expect($element.text()).toBe('Expected Text');

Når dine testfiler er sat op, er det enkelt at køre dem. Brug blot det script, vi definerede i package.json:

Jest finder alle dine testfiler, kører dem i JSDOM-miljøet og rapporterer resultaterne i din terminal. Du får vist, hvilke tests der bestod, hvilke der mislykkedes, samt oplysninger om eventuelle fejl.

I denne lektion har du lært, hvordan du opsætter et robust testmiljø til dine jQuery-applikationer ved hjælp af Jest.

• Vi initialiserede et Node.js-projekt med npm init.
• Installerede Jest og jest-environment-jsdom for at simulere et browsermiljø.
• Konfigurerede Jest i package.json til at bruge JSDOM.
• Fik forståelse for, hvordan man strukturerer testfiler, importerer jQuery og skriver grundlæggende påstande ved hjælp af Jests matchere.

Dette grundlag gør det muligt for dig at skrive effektive tests, der sikrer, at din jQuery-kode er pålidelig og nem at vedligeholde.