Testausympäristön määrittäminen

Ennen Jestin asentamista tarvitset Node.js-projektin. Jos sellaista ei vielä ole, voit luoda sen helposti.

Siirry projektihakemistoon päätteessä ja suorita:

Tämä komento luo package.json-tiedoston, joka hallinnoi projektisi riippuvuuksia ja komentosarjoja.

Asennetaan nyt Jest. Koska jQuery käsittelee usein selaimen DOM:ia (Document Object Model), tarvitsemme myös paketin jest-environment-jsdom. JSDOM tarjoaa Node.js:ssä selainta muistuttavan ympäristön, joten jQuery-koodisi voi käsitellä virtuaalista DOM:ia.

Asenna paketit kehitysriippuvuuksina:

Tämä lisää Jestin ja JSDOM:n tiedostoon package.json.

Jotta Jest käyttäisi JSDOM:ia, se on määritettävä. Voit tehdä tämän lisäämällä test-komentosarjan tiedostoon package.json tai luomalla tiedoston jest.config.js.

Vaihtoehto 1: package.json-tiedostossa

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

Valitsin --env=jsdom varmistaa, että Jest suorittaa testit JSDOM-ympäristössä.

Jest etsii testitiedostoja hakemistosta __tests__ tai tiedostoista, joiden pääte on .test.js (tai .spec.js). Luodaan yksinkertainen testitiedosto.

Luo projektin juureen hakemisto nimeltä __tests__ ja lisää sinne esimerkiksi tiedosto __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

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

describe ryhmittelee toisiinsa liittyvät testit, ja test (tai it) määrittää yksittäisen testitapauksen.

jQuery-koodin testaamista varten sinun on tuotava jQuery itse testitiedostoon. Voit asentaa jQueryn npm:n kautta: npm install jquery.

Sen jälkeen voit tuoda sen testitiedostoon:

// __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);
  });
});

Väitteillä tarkistat, että koodisi toimii oikein. Jest käyttää expect()-funktiota yhdessä vertailijoiden kanssa väitteiden muodostamiseen.

Tässä on yksinkertainen JavaScript-esimerkki (ei erityisesti jQueryyn liittyvä, mutta havainnollistaa väitteitä):

Jest tarjoaa monipuolisen valikoiman vertailijoita. Tässä on muutamia yleisiä vertailijoita, joita tulet käyttämään:

• .toBe(value): Tarkistaa täsmällisen yhtäsuuruuden (kuten ===).
• .toEqual(value): Tarkistaa objektien tai taulukoiden syvän yhtäsuuruuden.
• .not.toBe(value): Tarkistaa erisuuruuden.
• .toBeTruthy() / .toBeFalsy(): Tarkistaa totuusarvon kaltaisuuden.
• .toContain(item): Tarkistaa, sisältääkö taulukko tai merkkijono tietyn alkion.

jQueryn kanssa yhdistät nämä usein jQuery-metodeihin, kuten expect($element.text()).toBe('Expected Text');

Kun testitiedostot on määritetty, niiden suorittaminen on helppoa. Käytä vain tiedostossa package.json määrittämäämme komentosarjaa:

Jest löytää kaikki testitiedostot, suorittaa ne JSDOM-ympäristössä ja ilmoittaa tulokset päätteessä. Se näyttää, mitkä testit läpäistiin ja mitkä epäonnistuivat, sekä antaa lisätietoja epäonnistumisista.

Tässä oppitunnissa opit määrittämään jQuery-sovelluksille vankan testausympäristön Jestin avulla.

• Alustimme Node.js-projektin komennolla npm init.
• Asensimme Jestin ja jest-environment-jsdom-paketin selainympäristön simulointia varten.
• Määritimme Jestin tiedostossa package.json käyttämään JSDOM:ia.
• Opimme jäsentämään testitiedostot, tuomaan jQueryn ja kirjoittamaan perusväitteitä Jestin vertailijoiden avulla.

Tämä perusta mahdollistaa tehokkaiden testien kirjoittamisen ja varmistaa, että jQuery-koodisi on luotettavaa ja ylläpidettävää.