Pengujian JavaScript dengan Jest

Software Testing adalah suatu proses untuk mengevaluasi fungsionalitas perangkat lunak dengan maksud untuk menemukan apakah perangkat lunak yang dikembangkan sudah memenuhi persyaratan yang ditentukan atau tidak dan juga untuk memastikan bahwa perangkat lunak bebas dari cacat atau bug sehingga dapat menghasilkan produk yang berkualitas.

Testing level

source

• Unit Test: menguji bagian terkecil dari aplikasi, misal: menguji sebuah function, prosedur, dsb.

• Integration Test: uji aplikasi yang terkoneksi dengan external resource, misal: uji koneksi ke database atau pihak ketiga, uji function yang memanggil function lain, pengujian endpoint API, dsb.

• End-To-End Test: menguji tampilan antarmuka aplikasi, misal: validasi DOM saat sebuah element di klik, dsb.

Jest

Jest adalah JavaScript testing framework yang didalamnya terdapat test runner dan assertion libraries yang dapat menjalankan pengujian secara paralel serta memberikan eksekusi pengujian yang lebih cepat.

Instalasi

Buat project baru misal dengan nama direktori testing, lalu buat file utils.js dan utils.test.js

mkdir testing
cd testing
touch utils.js utils.test.js

inisiasi npm project dan install jest pada development dependencies

npm init -y
npm i --save-dev jest

pada file package.json tambahkan script untuk test, kurang lebih seperti ini nanti jadinya

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^26.4.2",
  }
}

---

Testing

sekarang kita akan coba buat sebuah function pada file utils.js

const subtract = (x, y) => {
  return x - y;
};

const add = (x, y, cb) => {
  if (x.match(/^\d+$/) && y.match(/^\d+$/)) {
    return cb(null, Number(x) + Number(y));
  } else {
    return cb(true, 'Error! harus angka!');
  }
};

module.exports = {
  subtract,
  add,
};

lalu kita akan uji pada file utils.test.js

const { subtract, add } = require('./utils');

test('should output result of subtraction', () => {
  const result = subtract(10, 2);
  expect(result).toBe(8);
});

test('should output result of addition', () => {
  add('2', '1', (err, res) => {
    expect(res).toBe(3);
  });
});

Penjelasan:

• test(): disini kita mendefinisikan apa yang mau diuji, atau bisa kita sebut juga sebagai test runner. Terdapat 2 parameter, yang pertama adalah deskripsi dari pengujian, kedua adalah sebuah callback

• expect(...).toBe(...): untuk membuat skenario dari tes, expect() berisi apa hasil yang diharapkan dan toBe() sebagai assertion library untuk membandingkan antara hasil yang diharapkan dengan hasil yang sesungguhnya

sekarang jalankan perintah berikut npm run test Jest secara otomatis akan mendeteksi file yang memiliki ekstensi atau nama *.test.js atau *.spec.js , maka akan mengasilkan seperti ini:

terdapat tulisan pass dengan warna font background hijau dan keterangan apa saja yang telah diuji.

---

End-to-end Testing

• Persiapan

Untuk persiapanya mungkin bisa clone dulu contoh case yang telah saya buat, atau kalo mau buat sendiri silahkan.

git clone https://github.com/shidqi/automation-testing.git
cd automation-testing
npm i
npm run start

jika sudah nanti akan muncul folder dist dan silahkan buka file index.html, disitu saya sudah buat case sederhana yaitu form untuk pertambahan dari dua buah angka

• **Puppeteer **

Install puppeteer dengan menjalankan perintah npm i --save-dev puppeteer

Puppeteer adalah Node.js library yang menyediakan high-level API untuk mengatur Chrome atau Chromium melalui protokol DevTools. Puppeteer berjalan secara headless, tapi kita juga dapat mengatur untuk berjalan secara non-headless melalui chromium.

kita buat skenario tes lagi pada file utils.test.js

test('should create an element with number of addition', async () => {
  // Mendefinisikan browser
  const browser = await puppeteer.launch({
    headless: false, // non-headless config
    slowMo: 80,
    args: ['--window-size=1920,1080'],
  });

  // Membuat page baru di browser
  const page = await browser.newPage();
  // Memanggil file apa html
  await page.goto('file:///C:/Users/Nauval/Desktop/testing/index.html');
  // Manipulasi DOM 
  // untuk membuat skenario mengisi form
  await page.click('input#numberX');
  await page.type('input#numberX', '14');
  await page.click('input#numberY');
  await page.type('input#numberY', '3');
  await page.click('#buttonResult');

  // hasil akhir
  const resultText = await page.$eval('#result', (el) => el.textContent);

  expect(resultText).toBe('17');
}, 10000); // Maksimum waktu eksekusi

setelah itu kita jalankan npm run test, jika berhasil makan akan muncul jendela browser dan menjalankan skenario tes yang telah kita buat secara otomatis.

kita lihat hasil tesnya di terminal

Sekian penjelasan mengenai testing pada javascript menggunakan framework Jest, mohon maaf jika ada kesalahan dan kekurangan. Kalau ada yang ingin ditanyakan bisa langsung diskusikan di kolom komentar.