Belajar Jest - TypeScript & Babel Support

#Pendahuluan

JavaScript berjalan di Node.js, tetapi TypeScript harus diubah dulu menjadi JavaScript sebelum dieksekusi. Episode 9 membahas bagaimana Jest menangani transformasi ini: menjalankan Jest dengan TypeScript memakai ts-jest atau Babel, memilih pendekatan yang sesuai kebutuhan, memetakan module aliases, dan menguji kode bertipe dengan nyaman.

Dukungan TypeScript adalah salah satu alasan Jest tetap dipilih di codebase modern. Setelah episode ini, kalian bisa menulis file test .test.ts dan .test.tsx dengan type checking yang benar tanpa perjuangan konfigurasi.

#Menjalankan Jest dengan TypeScript

#Dua Jalur Transformasi

Jest tidak mengeksekusi TypeScript secara langsung. Ada dua jalur transformasi yang umum:

• ts-jest: mengubah TypeScript menjadi JavaScript sambil melakukan type checking, sehingga type error bisa menggagalkan test.
• Babel: hanya membuang tipe (strip types) tanpa type checking, sehingga jauh lebih cepat tetapi tidak mendeteksi type error.

Pilih ts-jest jika kalian ingin type checking berjalan di dalam test, dan Babel jika kecepatan adalah prioritas — misalnya saat CI sudah menjalankan type checking secara terpisah.

#Menginstall ts-jest

npm install --save-dev jest ts-jest typescript @types/jest

Paket @types/jest menyediakan type definition untuk describe, test, expect, dan semua matcher, sehingga editor memberi autocomplete dan type checking yang benar pada file test.

#Konfigurasi ts-jest atau Babel

#ts-jest lewat jest.config.js

Konfigurasi dasar ts-jest cukup ringkas:

jest.config.js dengan ts-jest

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
};

Opsi preset: "ts-jest" menyiapkan transform otomatis untuk file TypeScript. Jika kalian memakai Babel, cukup install @babel/preset-typescript dan tambahkan preset di file babel.config.js:

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-typescript"
  ]
}

Dengan Babel, transformasi berjalan cepat karena tidak melakukan type checking. Untuk project besar, banyak tim memakai keduanya: Babel untuk kecepatan test, dan perintah tsc --noEmit terpisah untuk type checking di CI.

#Mapping Source Paths dan Module Aliases

#moduleNameMapper

Project TypeScript sering memakai alias seperti @/ untuk menghindari path relatif yang panjang. Jest tidak mengenal alias secara otomatis, jadi kalian harus memetakannya lewat moduleNameMapper:

Memetakan alias di Jest

module.exports = {
  preset: "ts-jest",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^@components/(.*)$": "<rootDir>/src/components/$1",
  },
};

moduleNameMapper memetakan pola alias ke path nyata. Baris "^@/(.*)$": "<rootDir>/src/$1" menerjemahkan @/utils menjadi src/utils. Pastikan pola ini konsisten dengan konfigurasi paths di tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Menjaga alias sinkron antara tsconfig.json dan moduleNameMapper menghindari error "module not found" yang membingungkan.

#Testing Typed Code dan Compile-time Behavior

#Menulis Test Bertipe

Dengan ts-jest, kalian mendapat type safety di dalam test itu sendiri:

Test TypeScript dengan tipe

interface Pengguna {
  id: number;
  nama: string;
}
 
function sapa(pengguna: Pengguna): string {
  return `Halo, ${pengguna.nama}`;
}
 
test("menyapa pengguna bertipe", () => {
  const pengguna: Pengguna = { id: 1, nama: "arif" };
  expect(sapa(pengguna)).toBe("Halo, arif");
});

const pengguna: Pengguna = ... memastikan test hanya menerima objek yang sesuai tipe. Jika sapa mengubah kontraknya, type checker akan menolak sebelum runtime — persis perilaku compile-time yang kita inginkan.

#Menangani Type Error di Test

Ketika ts-jest menemukan type error, test gagal dengan pesan kompilasi. Ada kalanya kalian ingin mengabaikan type di satu baris — misalnya menguji boundary — tetapi pakai as unknown dan sejenisnya dengan hemat. Type error yang dilempar di test adalah sinyal bahwa kontrak kode berubah dan test harus diperbarui, bukan dihindari.

#Penutup

Episode 9 menutup kesenjangan TypeScript dan Jest: memilih antara ts-jest yang memeriksa tipe dan Babel yang cepat, mengonfigurasi transform, memetakan module aliases secara konsisten dengan tsconfig, dan menulis test bertipe yang aman.

Inti yang harus dibawa pulang:

• ts-jest melakukan type checking; Babel hanya membuang tipe.
• @types/jest memberi type untuk seluruh API testing.
• preset: "ts-jest" menyiapkan transform TypeScript otomatis.
• moduleNameMapper memetakan alias agar Jest mengenali path seperti TypeScript.
• Jaga moduleNameMapper sinkron dengan paths di tsconfig.
• Test bertipe menangkap perubahan kontrak sebelum runtime.

Di episode 10 selanjutnya kita akan membahas test coverage — mengaktifkan laporan coverage di Jest, memahami line, branch, function, dan statement coverage, menetapkan threshold sebagai quality gate, serta memanfaatkan coverage untuk menjaga kualitas di CI.