8 Hal yang Membuat Jest pengujian Framework React Terbaik

() translation by (you can also view the original English article)

Peninjauan

Jest adalah pustaka pengujian JavaScript terbuka dari Facebook. Slogannya adalah "Pengujian JavaScript yang Menyenangkan". Sementara Jest dapat digunakan untuk menguji perpustakaan JavaScript apa pun, itu bersinar ketika datang ke React dan React Native.

Ini tidak mengherankan karena React dan Jest berasal dari Facebook, yang merupakan pengguna utama keduanya. Dalam tutorial ini saya akan menunjukkan kepada Anda delapan aspek berbeda dari Jest yang membuatnya sangat menyenangkan untuk menguji aplikasi React.

1. Jest itu mudah untuk diatur

Jest cukup mudah untuk diinstal sendiri. Anda bisa menginstalnya di tempat kosong langsung menggunakan npm atau yarn. Saya lebih suka yarn. Lihat 6 Hal yang Membuat Yarn Pengelola Paket JavaScript Terbaik untuk memahami alasannya. Sesederhana:

yarn add --dev jest

jika kamu lebih suka npm, kemudian ketik:

npm install --save-dev jest

Sebelum kita dapat menguji, mari kita menulis beberapa kode untuk menguji. Berikut adalah palindrome.js:

function isPalindrome(s) {
  const count = s.length - 1
  if count < 2 {
      return true
  }
  
  for (i = 0; i < (count + 1) / 2; ++i) {
    if (s[i] !== s[count - i])
      return false
  }
  return true
}

module.exports = isPalindrome

Berikut ini adalah tes jest di file yang disebut palindrome.test.js:

const isPalindrome = require('./palindrome')

test('it detects palindromes', () => {
  expect(isPalindrome('palindrome')).toBe(false)
  expect(isPalindrome('')).toBe(true)
  expect(isPalindrome('a')).toBe(true)
  expect(isPalindrome('gg')).toBe(true)
  expect(isPalindrome('pop')).toBe(true)
  expect(isPalindrome('1212')).toBe(false)
})

Untuk menjalankan tes, tambahkan ini ke package.json:

1	"scripts": {
2	"test": "jest"
3	}

Anda sekarang dapat menjalankan tes dengan yarn test atau npm test:

> yarn test
yarn run v1.1.0
warning package.json: No license field
$ jest
 PASS  ./palindrome.test.js
  ✓ it detects palindromes (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.667s
Ran all test suites.
✨  Done in 3.15s.

Ini cukup sederhana. Tetapi jika Anda menggunakan react-create-app untuk menciptakan proyek react Anda, Anda bahkan tidak harus melakukan itu. Paket jest datang dibundel dalam, dan Anda bisa mulai menulis tes segera.

2. jest secepat kilat

jest itu cepat. Sangat cepat. Ketika Anda tes CPU terikat, itu dapat mencukur signifikan waktu dari tes berjalan. Airbnb beralih dari Mocha ke jest, dan runtime total tes mereka turun lebih dari 12 menit hanya 4,5 menit pada tugas berat CI mesin dengan 32 Core. Tes lokal digunakan untuk mengambil 45 menit, yang menjatuhkan 14.5 menit.

Apa yang membuat jest begitu cepat? Ini adalah kombinasi dari beberapa faktor:

Parallelization: ini cukup jelas, dan kerangka pengujian lain menggunakannya juga.
Menjalankan tes paling lambat pertama: ini memastikan semua Core digunakan secara maksimal.
Caching mentransformasi babel: mengurangi CPU-intensif babel transformasi.

3. Jest adalah satu-Stop Shop

Jest hadir dengan pencocokan bawaan, mata-mata, dan perpustakaan tiruannya yang luas. Dulu didasarkan pada Jasmine, sehingga mewarisi semua kebaikan Jasmine. Tetapi dalam versi yang lebih baru Jest berangkat dari Jasmine, namun tetap memiliki fungsionalitas yang sama dan menambahkan rasa dan peningkatannya sendiri.

Ketika membandingkannya dengan solusi pengujian khusus berdasarkan Mocha, jelas bahwa kemudahan penggunaan merupakan perhatian utama dari desain Jest.

4. Jest punya Mocks Mengagumkan

Mocking adalah bagian yang sangat penting dari pengujian unit. Ini sangat penting jika Anda peduli dengan tes cepat (dan siapa yang tidak?).

Mocking memungkinkan Anda untuk mengganti dependensi tidak relevan yang mungkin lambat dan bahkan kontrol waktu untuk kode yang bergantung pada waktu. Jest memungkinkan Anda mengontrol secara penuh dependensi dan master waktu Anda.

Fungsi Mock sederhana

Ketergantungan Mock adalah tradisi lama dari tes unit. Jika kode Anda membaca file, menulis ke file, memanggil beberapa layanan jarak jauh atau mengakses database, mungkin lambat dan mungkin rumit untuk mengkonfigurasi dan membersihkan setelah pengujian. Saat berjalan secara paralel, bahkan tidak mungkin untuk mengontrol dengan benar.

Dalam kasus ini, lebih baik untuk mengganti ketergantungan nyata dengan fungsi tiruan yang tidak melakukan apa-apa selain hanya mencatat fakta itu dipanggil, sehingga Anda dapat memverifikasi alur kerja. The jest.fn() fungsi mock memungkinkan Anda memberikan nilai kembali kaleng (untuk beberapa panggilan berturut-turut), dan mencatat berapa kali itu disebut dan apa parameter berada di setiap panggilan.

Modul manual Mocks

Terkadang Anda mungkin perlu mengganti seluruh modul dengan datanya alih-alih beberapa fungsi. Jest memungkinkan Anda melakukan itu dengan menempatkan modul Anda sendiri dengan nama yang sama di sub-direktori __mocks__.

Setiap kali kode Anda menggunakan modul target, itu akan mengakses tiruan Anda daripada modul nyata. Anda bahkan dapat secara selektif memilih beberapa tes untuk menggunakan modul asli dengan memanggil jest.Unmock('moduleName').

Timer Mocks

Pengaturan waktu adalah kutukan dari unit test. Bagaimana jika Anda ingin menguji kode yang keluar setelah satu menit? Kode yang menyala setiap 30 detik? Kode khusus yang menjalankan algoritma rekonsiliasi pada akhir bulan?

Itu sulit untuk diuji. Anda dapat menyerah pada persyaratan waktu dari kode asli (dan kemudian tes Anda akan sangat lambat), atau Anda dapat memanipulasi waktu, yang jauh lebih berguna. Jest memungkinkan Anda mengontrol fungsi timer yang berhubungan dengan berikut:

setTimeout)
setInterval()
clearTimeout()
clearInterval()

ES6 Class Mocks

Jest sepenuhnya mendukung kelas ES6 dan menyediakan berbagai cara untuk mock mereka:

Mock otomatis: memungkinkan Anda memata-matai panggilan ke konstruktor dan semua metode, tetapi selalu mengembalikan yang tidak ditentukan.
Manual mock: menerapkan mock Anda sendiri dalam sub-direktori __mocks__.
Mock pabrik kelas dengan fungsi tingkat tinggi.
Selektif Mock menggunakan mockImplementation() atau mockImplementationOnce().

5. Jest mendukung TypeScript

TypeScript adalah superset mengetik populer dari JavaScript yang mengkompilasi ke JavaScript biasa. Jest mendukung TypeScript melalui paket ts-jest . Ini menggambarkan dirinya sebagai preprocessor TypeScript dengan dukungan peta sumber untuk Jest dan memiliki komunitas yang sangat aktif.

6. Jest membuat kamu tertutup

Jest memiliki laporan cakupan bawaan. Tes Anda hanya sebaik cakupannya. Jika Anda menguji hanya 80% dari kode Anda, maka bug di 20% lainnya akan ditemukan hanya dalam produksi.

Terkadang, masuk akal dari perspektif bisnis untuk melewati pengujian untuk beberapa bagian sistem. Misalnya, alat internal yang sering digunakan dan diubah oleh teknisi ahli Anda mungkin tidak memerlukan tingkat pengujian ketat yang sama dengan kode produksi Anda. Tetapi, bagaimanapun juga, ini harus menjadi keputusan sadar, dan Anda harus dapat melihat dengan tepat cakupan tes dari berbagai bagian sistem Anda.

Berikut adalah cara untuk membuat laporan cakupan untuk contoh sederhana palindrome:

1	> yarn test --coverage
2	yarn run v1.1.0
3	warning package.json: No license field
4	$ jest "--coverage"
5	PASS ./palindrome.test.js
6	✓ it detects palindromes (4ms)
7
8	-------------- \|----------\|----------\|----------\|----------\|
9	File \| % Stmts \| % Branch \| % Funcs \| % Lines \|
10	-------------- \|----------\|----------\|----------\|----------\|
11	All files \| 100 \| 100 \| 100 \| 100 \|
12	palindrome.js \| 100 \| 100 \| 100 \| 100 \|
13	-------------- \|----------\|----------\|----------\|----------\|
14	Test Suites: 1 passed, 1 total
15	Tests: 1 passed, 1 total
16	Snapshots: 0 total
17	Time: 1.712s
18	Ran all test suites.
19	✨ Done in 3.41s.

7. Jest bisa snapshot

Pengujian snapshot sangat bagus. Ini memungkinkan Anda menangkap string yang mewakili komponen yang Anda buat dan menyimpannya dalam file. Kemudian Anda dapat membandingkannya nanti untuk memastikan bahwa UI tidak berubah. Sementara itu ideal untuk bereaksi dan bereaksi asli aplikasi, Anda dapat menggunakan snapshot untuk membandingkan nilai-nilai serial kerangka lain. Jika Anda benar-benar mengubah UI Anda maka Anda perlu untuk memperbarui file snapshot untuk mencerminkan itu tentu saja.

8. Jest bisa diuji dengan arloji

Jest dapat berjalan dalam mode arloji, di mana ia menjalankan tes secara otomatis setiap kali Anda mengubah kode. Anda menjalankannya dengan argumen baris perintah --watchAll, dan itu akan memonitor aplikasi Anda untuk perubahan. Aku berlari bercanda dalam modus watch dan memperkenalkan bug pada tujuan untuk palindrome.js, dan inilah hasilnya:

 FAIL  ./palindrome.test.js
  ✕ it detects palindromes (11ms)

  ● it detects palindromes

    expect(received).toBe(expected) // Object.is equality

    Expected value to be:
      true
    Received:
      false

       6 |   expect(isPalindrome('a')).toBe(true)
       7 |   expect(isPalindrome('gg')).toBe(true)
    >  8 |   expect(isPalindrome('pop')).toBe(true)
       9 |   expect(isPalindrome('1212')).toBe(false)
      10 | })
      11 |

      at Object.<anonymous>.test (palindrome.test.js:8:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.598s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

Kesimpulan

Bercanda adalah kerangka pengujian cepat yang mudah untuk mengatur. Aktif dikembangkan dan digunakan oleh Facebook untuk menguji semua aplikasi bereaksi mereka dan banyak pengembang lain dan perusahaan.

Ia memiliki semua yang Anda butuhkan dalam satu paket nyaman, mendukung mentranskripsikan, dan IMO adalah pilihan terbaik untuk bereaksi dan bereaksi asli aplikasi pengujian. Hal ini juga sangat untuk bermigrasi dari solusi pengujian yang lain.

Ingat, bereaksi telah tumbuh dalam popularitas. Pada kenyataannya, kami memiliki sejumlah item di pasar Envato yang tersedia untuk pembelian, meninjau, implementasi, dan sebagainya. Jika Anda mencari sumber daya tambahan di sekitar Bereaksi, jangan ragu untuk memeriksanya .