Bagaimana Cara Mengatur Jest untuk React Testing?

Karena semakin banyak pengembang mengadopsi React sebagai kerangka pilihan front-end mereka, menjadi semakin penting untuk memastikan bahwa kode yang kami tulis memiliki kualitas tertinggi. Salah satu aspek penting dari penjaminan kualitas adalah pengujian, dan Jest adalah kerangka pengujian populer yang sering digunakan dengan React.

Jest adalah kerangka pengujian sumber terbuka yang dibuat oleh Facebook, dan dirancang untuk membuat pengujian kode JavaScript Anda semudah dan seefisien mungkin. Ini cepat, memiliki API yang mudah digunakan, dan dilengkapi dengan sejumlah fitur bawaan yang memudahkan pengujian.

Pada artikel ini, kami akan memandu Anda melalui proses pengaturan pengujian Jest for React. Kami akan membahas semua yang perlu Anda ketahui untuk memulai, mulai dari menginstal Jest hingga menulis test case pertama Anda.

Bercanda Untuk Bereaksi Pengujian

Jest adalah kerangka pengujian populer yang digunakan untuk menguji aplikasi React. Itu dibuat oleh Facebook dan dikenal karena kemudahan penggunaan dan waktu penyiapannya yang cepat. Jest dirancang untuk bekerja dengan React out of the box dan menyediakan banyak fitur untuk mempermudah pengujian.

Berikut adalah beberapa fitur yang membuat Jest menjadi pilihan populer untuk menguji aplikasi React:

i) Pengujian snapshot: Jest menyediakan fitur pengujian snapshot yang memungkinkan Anda membandingkan output komponen saat ini dengan snapshot yang disimpan sebelumnya. Ini memudahkan untuk memeriksa apakah ada perubahan yang tidak diinginkan telah dilakukan pada output komponen.

ii) Mocking: Jest menyediakan kemampuan mocking bawaan yang memungkinkan Anda membuat fungsi dan modul tiruan. Ini berguna saat Anda perlu mensimulasikan perilaku fungsi atau modul yang tidak tersedia atau sulit untuk diuji.

iii) Cakupan kode: Jest memberikan laporan cakupan kode yang menunjukkan persentase kode yang dicakup oleh pengujian Anda. Ini berguna untuk mengidentifikasi area kode Anda yang belum diuji dan mungkin memerlukan perhatian tambahan.

iv) Pengujian asinkron: Jest memudahkan pengujian kode asinkron dengan menyediakan utilitas untuk mengelola kode asinkron. Ini memungkinkan Anda untuk menulis pengujian yang menunggu janji atau kode asinkron lainnya untuk diselesaikan sebelum membuat pernyataan.

v) Pengaturan mudah: Jest mudah diatur dan dikonfigurasikan untuk aplikasi React Anda. Itu datang dengan konfigurasi default yang bekerja di luar kotak, tetapi dapat disesuaikan agar sesuai dengan kebutuhan spesifik Anda.

Secara keseluruhan, Jest adalah framework pengujian yang kuat dan fleksibel yang memudahkan pengujian aplikasi React. Banyak fitur dan pengaturannya yang mudah membuatnya menjadi pilihan populer bagi pengembang yang ingin menulis pengujian yang andal untuk komponen React mereka.

Menyiapkan Jest Untuk Pengujian React

Ada langkah-langkah tertentu yang perlu Anda ikuti untuk menyiapkan pengujian Jest for React pada tahun 2023.

1) Instal Jest

Jest dapat dipasang di proyek Anda menggunakan npm atau benang. Berikut langkah-langkah install Jest menggunakan npm:

i) Buka terminal atau command prompt Anda dan arahkan ke direktori proyek Anda.

ii) Jalankan perintah berikut untuk menginstal Jest sebagai ketergantungan pengembangan di proyek Anda:

npm install –save-dev jest

Perintah ini akan menginstal Jest dan menambahkannya ke file package.json proyek Anda di bawah bagian devDependencies.

Setelah penginstalan selesai, Anda dapat mulai menulis pengujian menggunakan Jest. Anda dapat menjalankan pengujian menggunakan perintah npm test. Secara default, Jest mencari file pengujian yang diberi nama dengan ekstensi .test.js atau .spec.js . Namun, Anda dapat mengonfigurasi Jest untuk mencari pengujian dengan ekstensi lain dengan memodifikasi properti testMatch di file konfigurasi Jest Anda.

Itu dia! Anda sekarang telah menginstal Jest di proyek Anda dan dapat mulai menulis pengujian untuk aplikasi Anda.

2) Buat File Konfigurasi

Untuk membuat file konfigurasi untuk Jest, Anda dapat membuat file bernama jest.config.js di direktori root proyek Anda. File ini akan berisi opsi konfigurasi yang harus digunakan Jest saat menjalankan tes.

Berikut adalah contoh file konfigurasi:

modul.ekspor = {

// Menunjukkan jenis file mana yang harus dianggap sebagai file uji.

pertandingan uji: [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(spek|tes).js?(x)'

],

// Daftar jalur ke direktori yang harus digunakan Jest untuk mencari file.

root: ['<rootDir>/src'],

// Peta dari ekspresi reguler ke jalur ke transformer.

transformasi: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'

},

// Pola glob yang digunakan Jest untuk mendeteksi file uji.

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

'<rootDir>/bangun/'

],

// Daftar nama reporter yang digunakan Jest saat menulis laporan liputan.

coverageReporters: ['json', 'teks', 'html'],

// Larik ekstensi file yang digunakan modul Anda.

moduleFileExtensions: ['js', 'json', 'jsx']

};

File konfigurasi contoh ini menentukan opsi berikut:

a) testMatch: Menentukan pola yang digunakan untuk mengidentifikasi file uji.

b) akar: Menentukan direktori di mana Jest harus mencari file.

c) transform: Menentukan transformasi yang harus diterapkan Jest ke file sebelum menjalankan pengujian.

d) testPathIgnorePatterns: Menentukan pola yang akan diabaikan saat mencari file pengujian.

e) coverageReporters: Menentukan reporter yang harus digunakan Jest untuk membuat laporan liputan.

f) moduleFileExtensions: Menentukan ekstensi file yang harus dicari Jest saat mencari file.

Anda dapat memodifikasi file konfigurasi ini agar sesuai dengan kebutuhan proyek Anda. Setelah Anda membuat file konfigurasi, Jest akan menggunakannya secara otomatis saat menjalankan pengujian di proyek Anda.

3) Tulis Tes Anda

Setelah Anda menginstal Jest dan menyiapkan file konfigurasi, Anda dapat mulai menulis tes untuk aplikasi React Anda. Berikut adalah langkah-langkah untuk membuat file pengujian dan menulis pengujian:

i) Buat file baru dengan ekstensi .test.js atau .spec.js . Ini akan menjadi file pengujian Anda.

ii) Dalam file pengujian, impor komponen atau fungsi yang ingin Anda uji:

impor { sum } dari './myFunctions';

iii) Tulis tes Anda. Pengujian adalah fungsi yang menggunakan Jest API untuk memeriksa apakah komponen atau fungsi berfungsi seperti yang diharapkan:

deskripsikan('jumlah', () => {

test('tambahkan 1 + 2 sama dengan 3', () => {

mengharapkan(jumlah(1, 2)).toBe(3);

});

});

Dalam contoh ini, kami menguji fungsi penjumlahan sederhana yang menambahkan dua angka. Fungsi yang mendeskripsikan mengelompokkan pengujian terkait bersama-sama, sedangkan fungsi pengujian menentukan kasus pengujian tunggal. Fungsi ekspektasi memeriksa bahwa fungsi penjumlahan mengembalikan nilai yang diharapkan.

iv) Jalankan pengujian Anda dengan menjalankan perintah pengujian npm di direktori proyek Anda. Jest akan mencari file pengujian di proyek Anda dan menjalankan semua pengujian yang ditemukannya.

Anda dapat menambahkan pengujian sebanyak yang Anda butuhkan untuk mencakup semua fungsionalitas komponen atau fungsi Anda. Jest menyediakan berbagai macam kecocokan dan utilitas lain yang dapat Anda gunakan untuk membuat pengujian yang lebih kompleks.

Dengan menulis tes untuk aplikasi React Anda, Anda dapat memastikan bahwa kode Anda berfungsi seperti yang diharapkan dan menghindari pengenalan regresi saat Anda membuat perubahan pada basis kode Anda.

4) Jalankan Tes Anda

Untuk menjalankan pengujian Anda menggunakan Jest, Anda dapat menggunakan perintah pengujian npm di direktori proyek Anda. Jest akan secara otomatis mendeteksi dan menjalankan file pengujian apa pun di proyek Anda yang cocok dengan pola yang ditentukan di file konfigurasi Jest Anda.

Saat Anda menjalankan pengujian npm, Jest akan menampilkan hasil pengujian Anda di konsol. Jika semua tes lulus, Jest akan menampilkan ringkasan hasil tes:

LULUS src/components/Example.test.js

✓ merender tanpa menabrak (21ms)

Test Suites: 1 lulus, 1 total

Tes: 1 lulus, 1 total

Jepretan: 0 total

Waktu: 3,204 detik, diperkirakan 4 detik

Jalankan semua test suite.

Jika ada pengujian yang gagal, Jest akan menampilkan pesan kesalahan yang menjelaskan kegagalan dan lokasi pengujian yang gagal:

GAGAL src/components/Example.test.js

• Contoh komponen › merender tanpa mogok

TypeError: Tidak dapat membaca properti 'peta' yang tidak terdefinisi

10 | render() {

11 | const { item } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

di Contoh.render (src/components/Example.js:12:17)

di ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

di Object.<anonymous> (src/components/Example.test.js:9:16)

Test Suites: 1 gagal, total 1

Tes: 1 gagal, total 1

Jepretan: 0 total

Waktu: 3,537 detik, diperkirakan 4 detik

Jalankan semua test suite.

Jest juga menyediakan berbagai opsi yang dapat Anda gunakan untuk menyesuaikan perilaku pengujian Anda, seperti menjalankan pengujian dalam mode tontonan, membuat laporan cakupan kode, dan lainnya. Anda dapat menemukan informasi lebih lanjut tentang opsi ini di dokumentasi Jest.

Membungkus

LambdaTest adalah platform pengujian berbasis cloud yang kuat yang dapat digunakan bersama Jest untuk menguji aplikasi React. Dengan memanfaatkan skalabilitas infrastruktur berbasis cloud LambdaTest, Anda dapat dengan cepat dan efisien menjalankan pengujian Jest di berbagai browser dan perangkat, memastikan bahwa aplikasi Anda bekerja seperti yang diharapkan di lingkungan yang berbeda.

Di blog ini, kami membahas langkah-langkah yang diperlukan untuk menyiapkan Jest untuk menguji aplikasi React. Kami juga mempelajari cara mengonfigurasi Jest untuk menggunakan LambdaTest sebagai lingkungan pengujian, menulis pengujian menggunakan Jest, dan menjalankan pengujian pada infrastruktur berbasis cloud LambdaTest.

Menggunakan LambdaTest dan Jest bersama-sama memberikan solusi pengujian yang tangguh untuk pengembang React yang dapat membantu mereka menangkap regresi dan bug di awal siklus pengembangan, sehingga meningkatkan kualitas keseluruhan aplikasi mereka.

Jadi, jika Anda ingin merampingkan alur kerja pengujian React, pertimbangkan untuk menggunakan LambdaTest dan Jest secara bersamaan untuk mencapai pengujian yang komprehensif, dapat diskalakan, dan efisien untuk aplikasi React Anda.