Pengajaran yang Dipetik Berhijrah daripada React CRA & Jest kepada Vite & Vitest

Artikel ini adalah untuk EDOCODE Advent Calendar 2024, diterbitkan pada 16 Disember 2024.

Artikel sebelum ini ditulis oleh Taiji Yamada, Pengurus Produk di EDOCODE: Sistem E-mel Automatik Menggunakan Notion Webhooks dan Alat Tanpa Kod "Buat" (Artikel itu dalam bahasa Jepun).

Juga, sila lihat Kalendar Kedatangan Wano oleh syarikat kumpulan induk kami!

Pengenalan

Apl kami, Gojiberry, ialah apl tinjauan Shopify yang membantu pedagang mengumpulkan maklum balas berharga daripada pelanggan mereka.

Dari awal lagi, kami telah membina Gojiberry dengan pembangunan dipacu ujian (TDD) untuk memastikan apl kami bebas pepijat dan kami boleh mengeluarkan ciri baharu dengan yakin tanpa melanggar fungsi sedia ada. Yayasan ini telah membolehkan kami membuat perubahan besar-besaran, seperti berhijrah daripada Create React App (CRA) ke Vite, dengan gangguan yang minimum.

Apabila CRA telah ditamatkan, dan kebergantungannya menjadi lapuk, kami memutuskan sudah tiba masanya untuk meningkatkan kepada alat binaan moden yang lebih baik menyokong apl kami yang semakin berkembang. Saiz besar pangkalan kod kami menambahkan sedikit kerumitan, tetapi peralihan kepada Vite terbukti berbaloi dengan usaha.

Matlamat kami adalah untuk memindahkan dua projek React kami:

• ? Tinjauan: Dipaparkan kepada pengguna akhir untuk mengumpulkan respons mereka.
• ? Papan Pemuka Pentadbir: Digunakan oleh pedagang untuk mengkonfigurasi tinjauan dan melihat analitis.

Jika anda seorang pemilik kedai Shopify yang ingin mengumpulkan maklum balas pelanggan yang boleh diambil tindakan, cuba Gojiberry hari ini di Kedai Apl Shopify!

Motivasi untuk Penghijrahan

CRA memberi perkhidmatan yang baik kepada kami pada masa lalu, tetapi ia tidak lagi dikekalkan dan kebergantungannya telah menjadi lapuk. Ini menimbulkan beberapa cabaran:

• ? Perpustakaan lapuk: Kami tidak dapat mengemas kini kepada perpustakaan kritikal seperti acara pengguna v14, yang memperkenalkan peningkatan ketara untuk mengendalikan ujian async.
• ? Ujian perlahan: Ujian gurauan semakin perlahan dari semasa ke semasa, dan kami mahukan masa binaan dan ujian yang lebih pantas yang ditawarkan oleh Vite dan Vitest.
• ⚖️ Tingkah laku tidak konsisten: Merentasi dua projek dalam monorepo kami, kedua-duanya menggunakan versi peristiwa pengguna yang sama, satu memerlukan membungkus setiap tindakan dengan act() manakala satu lagi tidak. Ketidakkonsistenan ini menimbulkan kekeliruan dan memperlahankan pembangunan.

Perubahan Utama dalam acara pengguna v14

Salah satu peningkatan terbesar dalam acara pengguna v14 ialah keperluan untuk menggunakan menunggu untuk semua kaedah interaksi. Ini menghapuskan keperluan untuk tindakan membalut dalam wait waitFor, menjadikan kod ujian lebih bersih dan lebih mudah diselenggara.

Sebelumnya (peristiwa pengguna v13):

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

test('updates state on click', async () => {
  render(<MyComponent />);

  userEvent.click(screen.getByRole('button'));

  await waitFor(() => {
    expect(screen.getByText('Updated state')).toBeInTheDocument();
  });
});

Selepas (peristiwa pengguna v14):

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

test('updates state on click', async () => {
  render(<MyComponent />);

  userEvent.click(screen.getByRole('button'));

  await waitFor(() => {
    expect(screen.getByText('Updated state')).toBeInTheDocument();
  });
});

Perubahan ini memudahkan ujian dengan mengalih keluar keperluan untuk mengurus perubahan keadaan secara eksplisit dengan waitFor. Pembangun tidak perlu lagi memikirkan masa untuk menyertakan tunggu waitFor, kerana perpustakaan mengendalikannya secara automatik.

Peningkatan dalam acara pengguna v14 dan Vitest menangani banyak isu ini, menawarkan pengalaman pembangunan yang lebih bersih, lebih pantas dan lebih konsisten.

Alternatif Dipertimbangkan

Sebelum memilih Vite, kami menilai Next.js dan Remix. Walaupun kedua-duanya adalah rangka kerja yang berkuasa, ia memerlukan perubahan ketara pada asas kod dan infrastruktur kami:

• Next.js dan Remix:

  • ? Penyusunan semula pangkalan kod: Kedua-dua rangka kerja memerlukan kami untuk menyusun semula pangkalan kod kami agar sesuai dengan konvensyen mereka, yang akan menjadi proses yang memakan masa.
  • ?️ Perubahan infrastruktur: Rangka kerja ini bukan rangka kerja Aplikasi Halaman Tunggal (SPA), jadi penggunaannya memerlukan kemas kini pada penggunaan dan infrastruktur pengehosan kami.
  • ⚖️ Keterlaluan untuk keperluan kami: Walaupun ia menawarkan ciri hebat untuk pemaparan dan penghalaan sebelah pelayan, ciri ini tidak diperlukan untuk kes penggunaan kami.

• Mengapa kami memilih Vite:

  • ? Perubahan kod minimum: Vite hampir tidak memerlukan perubahan pada pangkalan kod sedia ada kami, menjadikan peralihan itu mudah dan cekap.
  • ?️ Keserasian 1-dengan-1 dengan Jest: Dengan Vitest sangat serasi dengan Jest, kami boleh menggunakan semula kebanyakan kod ujian kami dengan pelarasan yang minimum.
  • ⚡ Peningkatan prestasi: Vite menyediakan masa binaan yang lebih pantas dan Vitest mempercepatkan pelaksanaan ujian dengan ketara.

Dengan memilih Vite, kami mengelakkan kerumitan menggunakan rangka kerja lengkap sambil meraih faedah alat binaan moden yang ringan.

Proses Penghijrahan

Kami menghampiri migrasi secara sistematik kerana monorepo kami mengandungi dua projek npm yang berasingan. Begini cara kami melaksanakan migrasi:

1. Mulakan dengan projek yang lebih kecil:

   • ?️ Memindahkan projek yang lebih kecil terlebih dahulu membolehkan kami mengenal pasti masalah yang berpotensi tanpa mempertaruhkan projek yang lebih besar.

2. Langkah migrasi:
   
   Proses untuk setiap projek mengikut langkah berikut:

   • ? Berhijrah ke Vite: Gantikan CRA dengan Vite, betulkan sebarang ralat dan pastikan apl dibina dan berjalan dengan betul.
   • ? Betulkan ralat TypeScript: Vite memperkenalkan peraturan TypeScript yang lebih ketat, mendedahkan isu dalam pangkalan kod. Membetulkan perkara ini menjadikan kod lebih berdaya tahan dan mengurangkan amalan buruk.
   • ✅ Berhijrah ke Vitest: Ujian peralihan daripada Jest ke Vitest.
   • ? Betulkan ralat ujian: Atasi sebarang ujian yang rosak yang disebabkan oleh perbezaan dalam cara Jest dan Vitest mengendalikan senario tertentu.
   • ? Tingkatkan kepada acara pengguna v14: Kemas kini pustaka ujian dan betulkan ujian yang rosak. Walaupun banyak ujian memerlukan pembetulan manual, kebanyakan isu berpunca daripada kes ujian yang salah, seperti tidak menunggu perubahan keadaan React apabila perlu. Ini adalah peluang yang berharga untuk mengesan dan membetulkan ralat dalam ujian kami.

3. Ulang untuk projek yang lebih besar:

   • ? Selepas berjaya memindahkan projek yang lebih kecil, kami menggunakan langkah yang sama untuk projek yang lebih besar.

Cabaran Dihadapi

• ? Ujian yang rosak: Berhijrah ke Vitest dan menaik taraf kepada acara pengguna v14 menyebabkan banyak kegagalan ujian. Walau bagaimanapun, kegagalan ini mendedahkan isu asas dalam kes ujian kami, seperti panggilan menunggu yang hilang untuk perubahan keadaan React. Membetulkan perkara ini meningkatkan ketepatan dan kebolehpercayaan ujian kami.
• ?️ Ketegasan TypeScript: Peraturan TypeScript Vite yang lebih ketat mendedahkan corak bermasalah dalam kod kami. Walaupun ia memerlukan usaha tambahan untuk membetulkan ralat ini, hasil akhirnya ialah pangkalan kod yang lebih bersih dan berdaya tahan.

Hasil

Penghijrahan daripada CRA ke Vite, bersama-sama dengan peralihan kepada Vitest dan acara pengguna v14, telah memberikan peningkatan yang ketara kepada aliran kerja pembangunan kami:

• ⚡ Masa binaan dan ujian yang lebih pantas: Selepas penghijrahan, suite ujian kami kini siap dalam 30% lebih sedikit masa, dengan ketara mempercepatkan saluran paip CI kami.
• ? Muat semula panas serta-merta: Penggantian modul panas (HMR) Vite semasa pembangunan adalah hampir serta-merta, peningkatan besar berbanding CRA, menjadikan pembangunan lebih lancar dan cekap.
• ? Kejelasan dan kebolehpercayaan ujian yang dipertingkatkan: Peningkatan kepada acara pengguna v14 dan Vitest menghasilkan ujian yang lebih bersih dan konsisten. Banyak ujian yang salah telah diperbaiki semasa penghijrahan, membantu kami menangkap pepijat tersembunyi dan meningkatkan kualiti kod keseluruhan.
• ?️ Pangkalan kod berdaya tahan: Peraturan TypeScript Vite yang lebih ketat mendedahkan beberapa bahagian untuk penambahbaikan dalam kod kami, menjadikan apl lebih mantap dan mengurangkan kemungkinan amalan buruk.

Penghijrahan telah menjadi pengubah permainan, membolehkan kami mengulang lebih pantas sambil mengekalkan keyakinan dalam pangkalan kod kami.

Pengajaran yang Diperoleh

Berikut ialah beberapa iktibar daripada pengalaman kami:

• ? Mulakan dengan kecil: Mulakan dengan projek yang lebih kecil untuk mengurangkan risiko dan memperhalusi proses.
• ⏳ Rancang untuk ujian yang rosak: Jangkakan beberapa kes ujian akan pecah dan peruntukkan masa untuk membetulkannya. Kegagalan ini sering mendedahkan isu yang lebih mendalam yang patut ditangani.
• ?️ Pegang peraturan yang lebih ketat: Walaupun peraturan TypeScript dan perbezaan rangka kerja yang lebih ketat pada mulanya boleh dirasakan seperti halangan, ia akhirnya membawa kepada pangkalan kod yang lebih baik.
• ? Nilai rangka kerja dengan teliti: Pilih alatan yang selaras dengan seni bina dan matlamat sedia ada anda.

Kesimpulan

Berhijrah dari CRA ke Vite dan Vitest telah membawa peningkatan yang ketara kepada aliran kerja kami. Kini kami menikmati binaan yang lebih pantas, kod ujian yang lebih bersih dengan acara pengguna v14 dan pangkalan kod yang lebih berdaya tahan berkat peraturan TypeScript yang lebih ketat.

Salah satu faktor utama yang menjadikan peralihan ini lebih lancar ialah pelaburan awal kami dalam pembangunan dipacu ujian (TDD). Dengan set ujian yang komprehensif disediakan, kami dapat membuat perubahan besar-besaran dengan yakin tanpa melanggar fungsi sedia ada.

Jika anda mempertimbangkan penghijrahan yang serupa, kami berharap pengalaman kami memberikan cerapan berharga untuk membimbing perjalanan anda.

---

Esok, 17 Disember 2024, artikel itu akan Bertukar daripada B2C kepada B2B: pengakuan pemasar oleh Amee Xu, Pengurus Pemasaran Produk di Gojiberry.

Di Kumpulan Wano, kami sedang mengambil pekerja! Jika anda berminat, sila lihat jawatan terbuka kami menggunakan pautan di bawah:

PEKERJAAN | Kumpulan Wano

Atas ialah kandungan terperinci Pengajaran yang Dipetik Berhijrah daripada React CRA & Jest kepada Vite & Vitest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!