Bagaimana anda menulis ujian unit untuk komponen React?

Bagaimana anda menulis ujian unit untuk komponen React?

Ujian unit penulisan untuk komponen React melibatkan mengesahkan bahawa setiap komponen berkelakuan seperti yang diharapkan secara berasingan. Berikut adalah panduan langkah demi langkah mengenai cara menulis ujian unit untuk komponen React:

1. Sediakan persekitaran ujian anda:

   • Pasang perpustakaan ujian yang diperlukan seperti perpustakaan ujian JEST dan React. Anda boleh melakukan ini dengan menjalankan npm install --save-dev jest @testing-library/react @testing-library/jest-dom .
   • Konfigurasikan jest dalam projek anda dengan membuat fail jest.config.js .

2. Tulis fail ujian:

   • Buat fail ujian untuk setiap komponen, biasanya dinamakan sebagai ComponentName.test.js atau ComponentName.spec.js .
   • Import komponen yang ingin anda uji di bahagian atas fail ujian.

3. Tulis Kes Ujian:

   • Gunakan fungsi describe untuk ujian berkaitan kumpulan.
   • Gunakan fungsi it atau test untuk menentukan kes ujian individu.
   • Gunakan render dari Perpustakaan Ujian React untuk menjadikan komponen anda dalam persekitaran ujian.

4. Penegasan:

   • Gunakan pernyataan untuk memeriksa sama ada komponen memberikan dengan betul, bertindak balas terhadap interaksi pengguna, dan mengemas kini keadaan atau propnya seperti yang diharapkan.
   • Gunakan expect dari jest untuk membuat pernyataan mengenai tingkah laku komponen.

Berikut adalah contoh mudah ujian unit untuk komponen React:

 <code class="javascript">import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import MyComponent from './MyComponent'; describe('MyComponent', () => { test('renders learn react link', () => { render(<mycomponent></mycomponent>); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); });</code>

Apakah amalan terbaik untuk menguji props komponen reaksi dan keadaan?

Ujian Props Komponen Reacting dan State dengan berkesan adalah penting untuk memastikan kebolehpercayaan komponen anda. Berikut adalah beberapa amalan terbaik:

1. Ujian Props:

   • Lulus nilai prop yang berbeza: Uji komponen anda dengan pelbagai nilai prop untuk memastikan ia bertindak dengan betul dalam keadaan yang berbeza.
   • Gunakan Fungsi Mock: Apabila menguji pengendali acara diluluskan sebagai alat peraga, gunakan fungsi mengejek untuk mengesahkan bahawa mereka dipanggil dengan hujah yang betul.
   • Ujian snapshot: Gunakan ujian snapshot untuk memastikan output yang dijangkakan sepadan dengan output yang diharapkan apabila prop berubah.

   Contoh ujian alat ujian:

    <code class="javascript">test('renders correctly with different props', () => { const { getByText } = render(<mycomponent name="John"></mycomponent>); expect(getByText('Hello, John!')).toBeInTheDocument(); });</code>

2. Keadaan ujian:

   • Simulasi Interaksi Pengguna: Gunakan fireEvent dari Perpustakaan Ujian React untuk mensimulasikan interaksi pengguna yang mengubah keadaan komponen.
   • Semak Perubahan Negeri: Gunakan act dari Perpustakaan Ujian React untuk memastikan bahawa kemas kini keadaan dipancarkan dengan betul sebelum membuat pernyataan.
   • Kes Ujian Kelebihan: Pastikan komponen anda mengendalikan kes kelebihan, seperti nilai keadaan kosong atau tidak sah.

   Contoh keadaan ujian:

    <code class="javascript">test('updates state on button click', () => { const { getByText } = render(<counter></counter>); const button = getByText('Increment'); fireEvent.click(button); expect(getByText('Count: 1')).toBeInTheDocument(); });</code>

Perpustakaan ujian mana yang paling biasa digunakan untuk ujian unit React?

Beberapa perpustakaan ujian biasanya digunakan untuk ujian unit menulis untuk komponen React. Berikut adalah yang paling popular:

1. Jest:

   • Jest adalah rangka kerja ujian JavaScript yang dibangunkan oleh Facebook. Ia digunakan secara meluas untuk menguji aplikasi reaksi kerana persediaan sifar konfigurasi dan laporan liputan terbina dalam.
   • Ia menyediakan satu set pemaduan yang kaya dan keupayaan mengejek, menjadikannya mudah untuk menulis dan menjalankan ujian.

2. React Testing Library:

   • Perpustakaan Ujian React adalah penyelesaian ringan untuk menguji komponen reaksi. Ia menggalakkan komponen ujian dengan cara yang menyerupai bagaimana pengguna berinteraksi dengan mereka.
   • Ia menyediakan utiliti seperti render , screen , dan fireEvent untuk berinteraksi dengan dan menguji komponen anda.

3. Enzim:

   • Enzim adalah utiliti ujian untuk React yang menjadikannya lebih mudah untuk menegaskan, memanipulasi, dan melintasi output komponen React anda.
   • Ia amat berguna untuk rendering cetek, yang membolehkan anda menguji komponen sebagai satu unit dengan mengasingkannya dari komponen anaknya.

4. Cypress:

   • Walaupun terutamanya digunakan untuk ujian akhir-ke-akhir, Cypress juga boleh digunakan untuk komponen reaksi ujian unit.
   • Ia menyediakan satu set arahan dan dakwaan yang kaya, dan ia terkenal dengan pengalaman ujian yang cepat, boleh dipercayai, dan mudah digunakan.

Bagaimanakah anda dapat memastikan ujian komponen React anda baik dan komprehensif?

Memastikan ujian komponen React anda adalah cekap dan komprehensif melibatkan gabungan strategi dan amalan terbaik. Inilah cara anda dapat mencapai ini:

1. Fokus pada fungsi utama:

   • Mengutamakan menguji fungsi teras komponen anda. Fokus pada interaksi pengguna yang paling kritikal dan perubahan keadaan.
   • Elakkan menguji butiran pelaksanaan yang mungkin berubah, dan sebaliknya menguji tingkah laku dan output komponen anda.

2. Gunakan rendering cetek:

   • Gunakan rendering cetek (contohnya, dengan enzim) untuk menguji komponen secara berasingan. Ini membantu menjaga ujian dengan cepat dan memberi tumpuan kepada komponen yang diuji.
   • Rendering cetek menghalang rendering komponen kanak -kanak, yang dapat mempercepatkan ujian anda dengan ketara.

3. Ujian snapshot leverage:

   • Gunakan ujian snapshot untuk mengesahkan dengan cepat bahawa output komponen anda tidak berubah tanpa diduga.
   • Syot kilat boleh menjadi sangat berguna untuk mengesan perubahan yang tidak diingini dalam komponen UI.

4. Mengejutkan Dependensi Luar:

   • Mock kebergantungan luaran dan API untuk mengasingkan ujian komponen anda dan menjadikannya lebih cepat.
   • Gunakan keupayaan mengejek JEST untuk membuat fungsi dan modul yang mensimulasikan tingkah laku kebergantungan luaran.

5. Mengoptimumkan Pelaksanaan Suite Ujian:

   • Gunakan pelaksanaan ujian selari JEST untuk menjalankan ujian secara serentak, yang dapat mengurangkan masa ujian keseluruhan.
   • Ujian berkaitan kumpulan bersama -sama menggunakan blok describe untuk meningkatkan organisasi ujian dan kebolehbacaan.

6. Integrasi berterusan:

   • Mengintegrasikan ujian anda ke dalam saluran paip CI/CD untuk memastikan ia berjalan secara automatik dengan setiap perubahan kod.
   • Gunakan alat seperti tindakan GitHub atau Jenkins untuk menjalankan ujian anda pada persekitaran dan konfigurasi yang berbeza.

7. Liputan Kod:

   • Gunakan laporan liputan kod JEST untuk mengenal pasti bahagian -bahagian yang belum diuji dari pangkalan kod anda.
   • Bertujuan untuk liputan kod tinggi, tetapi ingat bahawa liputan 100% tidak selalu diperlukan atau praktikal. Fokus pada liputan bermakna yang menguji senario penting.

Dengan mengikuti amalan ini, anda boleh membuat satu set ujian yang mantap yang cekap dan komprehensif, memastikan kebolehpercayaan dan mengekalkan komponen React anda.

Atas ialah kandungan terperinci Bagaimana anda menulis ujian unit untuk komponen React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!