Menyiapkan Lingkungan Pengujian

Menulis pengujian untuk kode jQuery Anda sangat penting untuk membangun aplikasi web yang tangguh dan mudah dipelihara. Pengujian membantu menemukan bug lebih awal dan memastikan kode Anda berperilaku sesuai harapan.

• Mencegah Regresi: Memastikan perubahan baru tidak merusak fungsionalitas yang sudah ada.
• Meningkatkan Kualitas Kode: Mendorong Anda menulis kode yang modular dan dapat diuji.
• Memudahkan Kolaborasi: Menyediakan dokumentasi yang jelas tentang cara kerja komponen.

Untuk menguji JavaScript, termasuk jQuery, Anda memerlukan pelaksana pengujian. Alat ini menjalankan pengujian dan melaporkan hasilnya.

Dua pilihan populer adalah:

• Jest: Kerangka kerja pengujian modern dan kaya fitur dari Facebook, yang banyak digunakan untuk React, tetapi juga cocok untuk JS apa pun.
• QUnit: Kerangka kerja pengujian khusus jQuery yang lebih sederhana, tetapi memiliki lebih sedikit fitur dibandingkan Jest.

Dalam pelajaran ini, kita akan berfokus pada penyiapan Jest karena fiturnya yang lengkap dan penggunaannya yang luas.

Sebelum memasang Jest, Anda memerlukan proyek Node.js. Jika belum memilikinya, Anda dapat membuatnya dengan mudah.

Buka direktori proyek Anda di terminal, lalu jalankan:

Perintah ini membuat berkas package.json, yang mengelola dependensi dan skrip proyek Anda.

Sekarang, mari kita pasang Jest. Karena jQuery sering berinteraksi dengan DOM (Document Object Model) browser, kita juga memerlukan jest-environment-jsdom. JSDOM menyediakan lingkungan seperti browser di Node.js, sehingga kode jQuery Anda dapat memanipulasi DOM virtual.

Pasang keduanya sebagai dependensi pengembangan:

Perintah ini menambahkan Jest dan JSDOM ke package.json Anda.

Untuk memberi tahu Jest agar menggunakan JSDOM, Anda perlu mengonfigurasinya. Anda dapat melakukannya dengan menambahkan skrip test ke package.json atau membuat berkas jest.config.js.

Opsi 1: Di 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"
  }
}

Flag --env=jsdom memastikan Jest menjalankan pengujian dalam lingkungan JSDOM.

Jest mencari berkas pengujian di direktori __tests__ atau berkas yang diakhiri dengan .test.js (atau .spec.js). Mari kita buat berkas pengujian sederhana.

Buat direktori bernama __tests__ di akar proyek Anda, lalu tambahkan berkas seperti __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

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

describe mengelompokkan pengujian yang terkait, sedangkan test (atau it) mendefinisikan satu kasus pengujian.

Untuk menguji kode jQuery, Anda perlu mengimpor jQuery itu sendiri ke dalam berkas pengujian. Anda dapat memasang jQuery melalui npm: npm install jquery.

Kemudian, di berkas pengujian Anda, impor jQuery dengan cara berikut:

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

Pernyataan adalah cara untuk memverifikasi bahwa kode Anda berperilaku dengan benar. Jest menggunakan fungsi expect() yang dipadukan dengan pencocok untuk membuat pernyataan.

Berikut contoh JavaScript sederhana (tidak khusus jQuery, tetapi menunjukkan penggunaan pernyataan):

Jest menyediakan kumpulan pencocok yang lengkap. Berikut beberapa pencocok umum yang akan Anda gunakan:

• .toBe(value): Memeriksa kesamaan persis (seperti ===).
• .toEqual(value): Memeriksa kesamaan mendalam pada objek atau array.
• .not.toBe(value): Memeriksa ketidaksamaan.
• .toBeTruthy() / .toBeFalsy(): Memeriksa nilai yang dianggap benar atau salah.
• .toContain(item): Memeriksa apakah array atau string berisi suatu item.

Untuk jQuery, Anda sering menggabungkannya dengan metode jQuery, seperti expect($element.text()).toBe('Expected Text');

Setelah berkas pengujian disiapkan, menjalankannya sangat mudah. Cukup gunakan skrip yang kita definisikan di package.json:

Jest akan menemukan semua berkas pengujian Anda, menjalankannya dalam lingkungan JSDOM, dan melaporkan hasilnya di terminal. Jest akan menampilkan pengujian yang berhasil, yang gagal, serta detail untuk setiap kegagalan.

Anda telah mempelajari cara menyiapkan lingkungan pengujian untuk jQuery menggunakan Jest dan JSDOM. Manakah dari perintah dan konfigurasi berikut yang penting untuk penyiapan dasar Jest dengan dukungan DOM?

Dalam pelajaran ini, Anda telah mempelajari cara menyiapkan lingkungan pengujian yang tangguh untuk aplikasi jQuery menggunakan Jest.

• Kita menginisialisasi proyek Node.js dengan npm init.
• Kita memasang Jest dan jest-environment-jsdom untuk menyimulasikan lingkungan browser.
• Kita mengonfigurasi Jest di package.json agar menggunakan JSDOM.
• Kita memahami cara menyusun berkas pengujian, mengimpor jQuery, dan menulis pernyataan dasar menggunakan pencocok Jest.

Dasar ini memungkinkan Anda menulis pengujian yang efektif sehingga kode jQuery Anda andal dan mudah dipelihara.