Komponen Pengujian di React Menggunakan Jest: Dasar-dasar

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

Final product image — What You'll Be Creating

Kode pengujian adalah praktik yang membingungkan bagi banyak pengembang. Itu bisa dimengerti karena menulis tes membutuhkan lebih banyak usaha, waktu, dan kemampuan untuk meramalkan kemungkinan kasus penggunaan. Startup dan pengembang yang bekerja pada proyek yang lebih kecil biasanya lebih suka mengabaikan tes sama sekali karena kurangnya sumber daya dan tenaga kerja.

Namun, ada beberapa alasan mengapa saya yakin Anda harus menguji komponen Anda:

Ini membuat Anda merasa lebih percaya diri tentang kode Anda.
Tes meningkatkan produktivitas Anda.

React juga tidak berbeda. Ketika seluruh aplikasi Anda mulai berubah menjadi tumpukan komponen yang sulit dipelihara, pengujian menawarkan stabilitas dan konsistensi. Menulis tes dari hari pertama akan membantu Anda menulis kode yang lebih baik, mendeteksi bug dengan mudah, dan mempertahankan alur kerja pengembangan yang lebih baik.

Dalam artikel ini, saya akan membawa Anda melalui segala sesuatu yang perlu Anda ketahui untuk menulis tes untuk komponen React Anda. Saya juga akan membahas beberapa teknik dan praktek-praktek terbaik saat kita melakukannya. Mari kita mulai!

Testing Components dalam React

Pengujian adalah proses memverifikasi bahwa test assertions kita benar dan bahwa mereka tetap benar sepanjang masa aplikasi. Test assertion ini adalah ekspresi boolean yang mengembalikan nilai true kecuali ada bug di kode Anda.

Misalnya, asersi bisa menjadi sesuatu yang sederhana seperti ini: "Ketika pengguna menavigasi ke / login, modal dengan id #login harus dirender." Jadi, jika ternyata Anda mengacaukan komponen masuk entah bagaimana, asersi akan kembali salah. Asersi tidak hanya terbatas pada apa yang diberikan — Anda juga dapat membuat asersi tentang bagaimana aplikasi merespons interaksi pengguna dan tindakan lain.

Ada banyak strategi pengujian otomatis yang digunakan oleh pengembang front-end untuk menguji kode mereka. KIta akan membatasi diskusi kita hanya dengan tiga paradigma uji perangkat lunak yang populer dengan React: pengujian unit, pengujian fungsional, dan pengujian integrasi.

Unit Testing

Pengujian unit adalah salah satu tes veteran yang masih populer di kalangan pengujian. Seperti namanya, Anda akan menguji setiap bagian kode untuk memverifikasi bahwa mereka berfungsi secara independen seperti yang diharapkan. Karena arsitektur komponen React, tes unit adalah fit alami. Mereka juga lebih cepat karena Anda tidak harus bergantung pada browser.

Tes unit membantu Anda memikirkan setiap komponen secara terpisah dan memperlakukannya sebagai fungsi. Tes unit Anda untuk komponen tertentu harus menjawab pertanyaan-pertanyaan berikut:

Apakah ada alat peraga? Jika ya, apa hubungannya dengan mereka?
Komponen apa yang dirender?
Haruskah itu memiliki sebuah keadaan? Kapan atau bagaimana seharusnya memperbarui keadaan?
Apakah ada prosedur yang harus diikuti ketika mount dan unmounts, atau pada interaksi pengguna?

Pengujian Fungsional

Tes fungsional yang digunakan untuk menguji perilaku bagian dari aplikasi Anda. Tes fungsional biasanya ditulis dari perspektif pengguna. Suatu fungsi biasanya tidak terbatas pada komponen tunggal. Ini bisa menjadi bentuk penuh atau seluruh halaman.

Misalnya, ketika Anda sedang membangun formulir pendaftaran, mungkin melibatkan komponen untuk elemen formulir, peringatan, dan kesalahan jika ada. Komponen yang diberikan setelah formulir dikirimkan juga merupakan bagian dari fungsi itu. Ini tidak memerlukan perender browser karena kita akan menggunakan DOM virtual di memori untuk pengujian kita.

Pengujian Integrasi

Pengujian integrasi adalah strategi pengujian di mana semua komponen individu diuji sebagai kelompok. Pengujian terintegrasi mencoba untuk mereplikasi pengalaman pengguna dengan menjalankan tes pada browser yang sebenarnya. Ini jauh lebih lambat daripada pengujian fungsional dan tes unit karena setiap rangkaian pengujian dijalankan pada browser langsung.

Dalam React, tes unit dan tes fungsional lebih populer daripada tes integrasi karena lebih mudah ditulis dan dipelihara. Itulah apa yang akan kita bahas dalam tutorial ini.

Ketahui Alat Anda

Anda memerlukan alat dan dependensi tertentu untuk memulai dengan pengujian unit dan fungsional aplikasi React Anda. Saya telah mencantumkannya di bawah ini.

Kerangka Uji Jest

Jest adalah kerangka pengujian yang memerlukan konfigurasi nol dan karenanya mudah disiapkan. Ini lebih populer daripada kerangka uji seperti Jasmine dan Mocha karena dikembangkan oleh Facebook. Jest juga lebih cepat daripada yang lain karena menggunakan teknik cerdik untuk memparalelkan uji coba lintas pekerja. Selain itu, setiap tes berjalan di lingkungan sandbox untuk menghindari konflik antara dua tes berurutan.

Jika Anda menggunakan create-react-app, aplikasi ini dikirim dengan Jest. Jika tidak, Anda mungkin harus menginstal Jest dan beberapa dependensi lainnya. Anda dapat membaca lebih lanjut tentang hal itu di halaman Jest documentation page.

react-test-renderer

Bahkan jika Anda menggunakan create-react-app, Anda perlu menginstal paket ini untuk merender snapshot. Pengujian snapshot adalah bagian dari pustaka Jest. Jadi, daripada render UI dari seluruh aplikasi, Anda dapat menggunakan perender tes untuk menghasilkan output HTML dengan serializable dengan cepat dari DOM virtual. Anda dapat menginstalnya sebagai berikut:

1	yarn add react-test-renderer

ReactTestUtils dan Enzyme

react-dom / test-utils terdiri dari beberapa uji utilitas yang disediakan oleh tim React. Sebagai alternatif, Anda dapat menggunakan paket Enzyme yang dirilis oleh Airbnb. Enzyme jauh lebih baik daripada ReactTestUtils karena mudah untuk menegaskan, memanipulasi, dan melintasi keluaran React Components Anda. Kita akan memulai pengujian kita dengan React utils dan kemudian transisi ke Enzyme nanti.

Untuk menginstal Enzyme, jalankan perintah berikut.

1	yarn add enzyme enzyme-adapter-react-16

Menambahkan kode ke src/SetupTests.js.

1	import { configure } from 'enzyme';
2	import Adapter from 'enzyme-adapter-react-16';
3
4	configure({ adapter: new Adapter() });

Ada informasi lebih lanjut tentang ini di bagian Testing Components dari create-react-app page.

Menyiapkan Aplikasi Demo dan Mengorganisir Tes

Kita akan menulis tes untuk aplikasi demo sederhana yang menampilkan tampilan master / detail dari daftar produk. Anda dapat menemukan aplikasi demo di GitHub repo kami. Aplikasi ini terdiri dari komponen kontainer yang dikenal sebagai ProductContainer dan tiga komponen presentasi: ProductList, ProductDetails, dan ProductHeader.

Directory Structure

.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── ProductContainer.js
│   │   ├── ProductDetails.jsx
│   │   ├── ProductHeader.js
│   │   ├── ProductList.jsx
│   ├── index.js
│   └── style.css

Demo ini adalah kandidat yang baik untuk pengujian unit dan pengujian fungsional. Anda dapat menguji setiap komponen secara terpisah dan / atau menguji fungsionalitas daftar produk secara keseluruhan.

Setelah Anda men-download demo, buat direktori dengan nama __tests__ di dalam / src / components /. Anda kemudian dapat menyimpan semua file tes yang terkait dengan fungsi ini di dalam direktori __tests__. Penguji biasanya menamai file uji mereka sebagai .spec.js atau .test.js — misalnya, ProductHeader.test.js atau ProductHeader.spec.js.

Menulis Basic Tests dalam React

Buat file ProductHeader.test.js jika Anda belum melakukannya. Berikut ini adalah pengujian kami yang pada dasarnya akan terlihat seperti:

src/components/tests/ProductList.test.js

describe('ProductHeader', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

Test suite dimulai dengan describe block, yang merupakan fungsi Jest global yang menerima dua parameter. Parameter pertama adalah judul dari test suite, dan parameter kedua adalah implementasi yang sebenarnya. Setiap it() dalam rangkaian uji sesuai dengan tes atau spec. Tes berisi satu atau lebih harapan yang memeriksa status kode.

1	expects(true).toBeTruthy();

Di Jest, harapan adalah pernyataan yang mengembalikan true atau false. Ketika semua pernyataan dalam spec benar, dikatakan lulus. Jika tidak, tes dikatakan gagal.

Misalnya, kita telah membuat dua spesifikasi pengujian. Yang pertama harus jelas lulus, dan kedua harus gagal.

Catatan: toBeTruthy () adalah penentu yang telah ditetapkan. Di Jest, setiap matcher membuat perbandingan antara nilai yang diharapkan dan nilai aktual dan mengembalikan boolean. Masih banyak lagi matchers yang tersedia, dan kita akan melihatnya sebentar lagi.

Menjalankan Test Suite

create-react-app telah menyiapkan semua yang Anda perlukan untuk menjalankan rangkaian uji. Yang perlu Anda lakukan adalah menjalankan perintah berikut:

yarn test

Anda akan melihat sesuatu seperti ini:

Untuk membuat lulus tes gagal, Anda harus mengganti toBeTruthy () matcher dengan toBeFalsy ().

1	expects(false).toBeFalsy();

Itu dia!

Menggunakan Matchers dalam Jest

Seperti yang disebutkan sebelumnya, Jest menggunakan matchers untuk membandingkan nilai. Anda dapat menggunakannya untuk memeriksa kesetaraan, membandingkan dua nomor atau string, dan memverifikasi truthiness ekspresi. Berikut ini adalah daftar matchers populer yang tersedia dalam Jest.

toBe();
toBeNull()
toBeDefined()
toBeUndefined()
toBeTruthy()
toBeFalsy()
toBeGreaterThan()
toBeLesserThan()
toMatch()
toContain()

Ini hanya rasa. Anda dapat menemukan semua matchers tersedia di reference docs.

Menguji Komponen React

Pertama, kita akan menulis beberapa tes untuk komponen ProductHeader. Buka ProductHeader.js file jika Anda belum melakukannya.

src/components/ProductHeader.js

import React, {Component} from 'react';
   
class ProductHeader extends Component  {
    render() {
        return(
            <h2 className="title"> Product Listing Page </h2>
        );
    }
};
export default ProductHeader;

Apakah Anda ingin tahu mengapa saya menggunakan komponen kelas di sini daripada komponen fungsional? Alasannya adalah bahwa lebih sulit untuk menguji komponen fungsional dengan ReactTestUtils. Jika Anda penasaran ingin tahu mengapa, this Stack Overflow discussion ini memiliki jawabannya.

Kita bisa menulis tes dengan asumsi berikut:

Komponen harus merender tag h2.
Tag h2 harus memiliki kelas bernama title.

Untuk membuat komponen dan untuk mengambil node DOM yang relevan, kita perlu ReactTestUtils. Hapus spesifikasi dummy dan tambahkan kode berikut:

src/Components/tests/ProductHeader.Test.js

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

Untuk memeriksa keberadaan node h2, pertama-tama kita harus membuat elemen React kita menjadi sebuah node DOM di dokumen. Anda dapat melakukannya dengan bantuan beberapa API yang diekspor oleh ReactTestUtils. Misalnya, untuk membuat komponen <ProductHeader>kita, Anda dapat melakukan sesuatu seperti ini:

1	const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);

Kemudian, Anda dapat mengekstrak tag h2 dari komponen dengan bantuan findRenderedDOMComponentWithTag ('tag-name'). Memeriksa semua node anak dan menemukan node yang sesuai tag-name.

Berikut adalah spesifikasi uji keseluruhan.

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

Coba simpan, dan test runner Anda harus menunjukkan kepada Anda bahwa tes telah berlalu. Ini agak mengejutkan karena kita tidak memiliki pernyataan expect() seperti pada contoh sebelumnya. Sebagian besar metode yang diekspor oleh ReactTestUtils memiliki harapan yang tertanam di dalamnya. Dalam kasus khusus ini, jika utilitas uji gagal menemukan tag h2, itu akan melemparkan kesalahan dan pengujian akan gagal secara otomatis.

Sekarang, coba buat kode untuk tes kedua. Anda dapat menggunakan findRenderedDOMcomponentWithClass() untuk memeriksa apakah ada setiap node dengan kelas 'title'.

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })

Itu dia! Jika semua berjalan dengan baik, Anda akan melihat hasilnya dalam warna hijau.

Kesimpulan

Meskipun kita baru saja menulis dua spesifikasi uji, kita telah membahas banyak hal dalam prosesnya. Di artikel berikutnya, kita akan menulis beberapa tes lengkap untuk halaman daftar produk kita. Kita juga akan mengganti ReactTestUtils dengan Enzyme. Mengapa? Enzyme menawarkan antarmuka tingkat tinggi yang sangat mudah digunakan dan developer-friendly. Menantikan untuk bagian kedua!

Jika suatu saat Anda merasa terjebak atau butuh bantuan, beri tahu kami di komentar.