fullstack react tdd example

React Component-Driven Development & DOM Testing Monorepo

Selamat datang di Monorepo Pengembangan & Pengujian DOM yang digerakkan oleh React Component! Repositori ini berisi semua kode dan contoh untuk pembicaraan komprehensif tentang membangun aplikasi React menggunakan pengembangan uji-driven (TDD) dan pengujian DOM. Berikut ini tautan ke pembicaraan itu sendiri. Monorepo telah diselenggarakan menggunakan PNPM dan Turborepo untuk merampingkan manajemen paket dan proses pembangunan.

Jika Anda tidak terbiasa dengan konsep monorepo, itu adalah repositori tunggal yang berisi banyak proyek. Dalam hal ini, monorepo berisi perpustakaan UI bersama, dan beberapa aplikasi bereaksi. Perpustakaan UI bersama berisi komponen reaksi yang dapat digunakan kembali dan diakses, bersama dengan tes dan cerita mereka. Aplikasi React menunjukkan penggunaan dan integrasi komponen. Aplikasi Next.js menunjukkan kekuatan komposisi dalam bereaksi dengan komponen modal pustaka Mantine UI.

Anda dapat membaca lebih lanjut tentang monorepos di sini.

Ringkasan

Tujuan utama dari monorepo ini adalah untuk menunjukkan praktik terbaik untuk membangun komponen bereaksi yang dapat digunakan kembali dan dapat diakses, dan bagaimana cara mengujinya secara efektif menggunakan alat -alat seperti React Testing Library dan Storybook. Selain itu, ini menampilkan penggunaan pekerja layanan tiruan untuk menangani ketergantungan eksternal dalam pengujian dan menggambarkan pola backend-for-frontend (BFF) dalam aksi. Pembicaraan ini dirancang untuk audiens dengan campuran pengalaman front-end dan back-end, menekankan kekuatan komposisi dalam React dan bagaimana itu berlaku untuk pengembangan dan pengujian komponen.

Pada akhirnya, kita melihat bagaimana kita dapat membangun dan menguji antarmuka ini:

Isi

Monorepo disusun sebagai berikut:

Aplikasi

• frontend : Aplikasi React yang dibangun menggunakan aplikasi React Create untuk menunjukkan penggunaan dan integrasi komponen.
• mantine-example : Aplikasi Next.js yang menunjukkan kekuatan komposisi dalam bereaksi dengan komponen modal Perpustakaan UI Mantine. Aplikasi ini digunakan sebagai pengantar pembicaraan, menyoroti manfaat komposisi saat membangun dan menguji komponen bereaksi.

Paket

• ui : Contoh perpustakaan UI bersama yang berisi komponen bereaksi yang dapat digunakan kembali dan dapat diakses, bersama dengan tes dan cerita mereka.
• types : Perpustakaan Bersama yang berisi tipe naskah yang digunakan oleh paket lain.
• mocks : Perpustakaan bersama yang berisi data tiruan yang digunakan oleh paket lain.

Memulai

Anda perlu menginstal PNPM secara global untuk menjalankan monorepo.

Versi PNPM yang digunakan saat mengembangkan monorepo ini adalah 8.2.0 , dan Node versi 18.16.0 .

Versi buku cerita yang diinstal memiliki masalah saat menjalankan versi node sebelumnya. Harap gunakan setidaknya Node Versi 18.16.0 .

Untuk menginstal dependensi untuk monorepo, jalankan perintah berikut:

pnpm install
pnpm build

Monorepo dapat dijalankan menggunakan perintah berikut:

• pnpm run dev : Menjalankan monorepo dalam mode pengembangan.
• pnpm run build : Membangun monorepo untuk produksi.
• pnpm run start : Menjalankan monorepo dalam mode produksi.
• pnpm run test : Menjalankan tes monorepo.

Untuk menjalankan buku cerita, jalankan perintah berikut:

pnpm run storybook

Menjalankan tes

Anda dapat menjalankan semua tes untuk tes repo atau menjalankan untuk paket tertentu.

Untuk menjalankan semua tes, jalankan perintah berikut:

pnpm run test

Untuk menjalankan tes untuk paket tertentu, CD ke dalam direktori dan menjalankan perintah berikut:

pn test -- --watch

Untuk menjalankan tes aplikasi, jalankan perintah berikut:

 cd apps/frontend
pnpm run test -- --watch

Untuk menjalankan tes komponen, jalankan perintah berikut:

 cd packages/ui
pnpm run test -- --watch

Saya harap Anda menemukan monorepo ini berguna dalam memahami praktik terbaik untuk pengembangan dan pengujian DOM yang digerakkan oleh komponen. Jangan ragu untuk mengeksplorasi kode, menjalankan contoh, dan berkontribusi pada repositori. Happy Coding!

Catatan tambahan

Arsitektur API yang disarankan untuk ujung depan modern adalah backend untuk pola frontend:

Anda dapat membaca lebih lanjut tentang itu di sini.

AI menghasilkan catatan untuk pembicaraan

Berikut ringkasan dan pengambilan kunci dari presentasi:

Ringkasan: Paul Hammond, Direktur di Pack Software, menyajikan pengembangan yang digerakkan oleh komponen dengan pengujian React dan DOM, yang mencakup topik-topik seperti pengembangan yang digerakkan oleh uji, aksesibilitas, dan praktik front-end modern.

Ide:

• Pengembangan yang digerakkan oleh komponen membantu membangun elemen UI yang dapat digunakan kembali dan konsisten
• Pengujian terhadap perilaku daripada detail implementasi memberikan lebih banyak nilai
• Aksesibilitas harus menjadi pertimbangan utama saat membangun komponen ujung depan
• Alat seperti Storybook memungkinkan pengembangan interaktif dan dokumentasi komponen
• Pekerja layanan tiruan memungkinkan panggilan API mengejek untuk pengujian dan pengembangan
• Pola backend for frontend (BFF) dapat menyederhanakan arsitektur front-end
• Tes yang baik memberikan kepercayaan diri untuk membuat perubahan dari waktu ke waktu
• Perpustakaan Pengujian Bereaksi Mendorong Pengujian Dari Perspektif Pengguna
• TDD dapat mengarah pada kode yang lebih dapat dipelihara dan fleksibel
• Komponen yang dapat dikomponen memungkinkan penyesuaian dan penggunaan kembali yang lebih mudah

Wawasan:

• Perilaku pengujian alih -alih implementasi memungkinkan refactoring dan pemeliharaan yang lebih mudah
• Selektor yang dapat diakses dalam tes dapat meningkatkan aksesibilitas aplikasi secara keseluruhan
• Penjelajah Komponen Seperti Storybook Memfasilitasi Kolaborasi antara Desainer dan Pengembang
• Mengejek di tingkat jaringan memungkinkan tiruan yang konsisten di seluruh tes dan pengembangan
• TDD dapat menyebabkan loop umpan balik yang lebih cepat dan kepercayaan yang lebih tinggi dalam perubahan kode
• Berfokus pada hasil pengiriman dapat membantu meyakinkan tim untuk mengadopsi praktik TDD
• Menggunakan DOM untuk menguji dengan cermat meniru interaksi pengguna nyata
• Memisahkan masalah UI dari logika bisnis meningkatkan arsitektur aplikasi secara keseluruhan
• Praktik pengiriman berkelanjutan seperti "kerangka berjalan" dapat meningkatkan pengaturan proyek
• Tes unit penyeimbang dengan Tes Integrasi/E2E mencakup skenario pengujian yang berbeda

KUTIPAN:

• "Tujuan dari tes yang baik adalah untuk memberi kita kepercayaan diri untuk membuat perubahan dari waktu ke waktu."
• "Jika tes lulus, kita harus merasa cukup percaya diri untuk langsung ke produksi."
• "Ujung depan modern dibangun dengan komponen dan bukan halaman."
• "Pengembangan yang digerakkan komponen membantu kita membangun komponen yang dapat digunakan kembali yang mengurangi duplikasi."
• "Kami ingin melihat bagaimana kami membuat perubahan dari waktu ke waktu, bagaimana tes membantu kami melakukan perubahan dari waktu ke waktu."
• "Tes yang baik harus memberi kita kepercayaan diri untuk membuat perubahan dari waktu ke waktu."
• "Kegembiraan TDD adalah cara yang tepat untuk meletakkannya karena itu adalah pengalaman yang membebaskan."
• "Saya belum bekerja terlambat selama 10 tahun, dan karena saya tidak perlu, dan Anda tidak perlu jika Anda menulis dengan gaya tes-pertama."
• "Ketika datang untuk menguji, salah satu hal yang biasanya saya lakukan adalah ... Saya akan menarik cabang seseorang, menjalankan tes, sengaja gagal sesuatu dan melihat tes."
• "Aku perlu memiliki keyakinan itulah cara kerjanya."

Kebiasaan:

• Tulis tes sebelum kode implementasi untuk memastikan cakupan tes yang tepat
• Gunakan pemilih yang dapat diakses dalam tes untuk meningkatkan aksesibilitas secara keseluruhan
• Berkolaborasi erat dengan desainer menggunakan alat seperti Storybook
• Kode refactor dengan percaya diri dengan suite tes yang kuat di tempatnya
• Jalankan tes dalam mode arloji untuk umpan balik instan selama pengembangan
• Gunakan pekerja layanan tiruan untuk mensimulasikan respons API dalam tes
• Bangun kerangka berjalan untuk membangun jaringan pipa CI/CD di awal proyek
• Tinjau Permintaan Tarik Dengan Disengaja Breaking Code untuk memverifikasi cakupan tes
• Memprioritaskan perilaku pengujian daripada detail implementasi dalam tes front-end
• Terus belajar dan menerapkan praktik terbaik dalam pengembangan front-end

Fakta:

• Perpustakaan pengujian bereaksi dibangun di atas pustaka pengujian dom
• Jest menggunakan representasi DOM dalam memori yang disebut JSDOM untuk pengujian
• Pekerja layanan tiruan dapat mencegat dan mengejek panggilan API di tingkat jaringan
• Storybook adalah alat untuk mengembangkan komponen UI secara terpisah
• Aksesibilitas mempengaruhi 30-40% dari populasi dalam beberapa bentuk
• Pengembangan yang digerakkan oleh komponen adalah kerangka kerja-agnostik dan berlaku untuk bereaksi, vue, sudut, dll.
• Pengembangan yang digerakkan oleh uji dapat menyebabkan bug yang lebih sedikit dan kode yang lebih mudah dipelihara
• Backend for Frontend Pattern dapat meningkatkan kinerja front-end dan menyederhanakan arsitektur
• Cypress and Playwright adalah alat untuk pengujian aplikasi web ujung ke ujung
• Pengujian mutasi dapat digunakan untuk memverifikasi kualitas suite uji

Referensi:

• Perpustakaan pengujian bereaksi
• Buku cerita
• Pekerja Layanan Mock
• Bersenda gurau
• Cypress
• Dramawan
• Redux Toolkit
• Bereaksi kueri
• Pengujian JavaScript (oleh Kent C. Dodds)
• Inisiatif Aksesibilitas Web W3C (WAI)
• Ian Cooper's Talk "TDD: Di mana semuanya salah"
• Github Primer (Pustaka Komponen UI)
• Menguji taman bermain perpustakaan
• Pola Backend for Frontend (BFF)

Satu kalimat takeaway: pengembangan uji-driven dengan React Testing Library memungkinkan kode front-end yang percaya diri dan dapat dipelihara dengan berfokus pada perilaku dan aksesibilitas.

Rekomendasi:

• Mengadopsi pengembangan yang digerakkan oleh komponen untuk meningkatkan reusability dan konsistensi dalam aplikasi front-end
• Gunakan buku cerita atau alat serupa untuk mengembangkan dan mendokumentasikan komponen UI
• Menerapkan praktik pengembangan yang digerakkan oleh tes untuk kode front-end untuk meningkatkan kualitas
• Fokus pada perilaku pengujian daripada detail implementasi untuk tes yang lebih tangguh
• Memanfaatkan pekerja layanan tiruan untuk mengejek API yang konsisten dalam tes dan pengembangan
• Pertimbangkan menerapkan backend untuk pola frontend untuk menyederhanakan arsitektur front-end
• Memprioritaskan aksesibilitas dalam desain dan pengujian komponen sejak awal
• Gunakan pemilih yang dapat diakses oleh perpustakaan pengujian reaksi untuk meningkatkan aksesibilitas aplikasi secara keseluruhan
• Menerapkan praktik integrasi dan pengiriman yang berkelanjutan di awal proyek
• Uji unit keseimbangan dengan integrasi dan tes ujung ke ujung untuk cakupan komprehensif