Strategi Pengujian Integrasi

Selamat datang ke Pengujian Penyepaduan untuk frontend mikro! Pelajaran ini memfokuskan cara menguji sambungan dan interaksi antara bahagian aplikasi bersekutu anda yang berbeza.

Walaupun ujian unit menyemak komponen individu, ujian penyepaduan memastikan beberapa frontend mikro (MFE) atau modul dikongsi berfungsi dengan betul bersama-sama sebagai satu sistem yang padu.

Dalam seni bina frontend mikro, pasukan yang berbeza sering membangunkan bahagian aplikasi secara berasingan. Hal ini memberikan fleksibiliti yang tinggi, tetapi turut mewujudkan cabaran pengujian yang unik.

• Sahkan Interaksi: Pastikan MFE berkomunikasi dengan betul.
• Kesan Pepijat Penyepaduan: Cari masalah apabila komponen tidak dapat digabungkan dengan baik.
• Tingkatkan Keyakinan: Gunakan aplikasi bersekutu dengan yakin kerana fungsinya telah dipastikan.

Hal ini penting kerana pepijat dalam cara dua MFE berinteraksi boleh merosakkan keseluruhan pengalaman pengguna.

Menguji interaksi merentas aplikasi bebas tidak sentiasa mudah. Berikut ialah beberapa halangan yang biasa:

• Penyediaan Persekitaran: Meniru persekitaran bersekutu penuh untuk ujian boleh menjadi rumit.
• Pengurusan Kebergantungan: Mengendalikan beberapa modul jauh dan versinya.
• Pengasingan Ujian: Memastikan ujian tidak saling mengganggu apabila merentasi sempadan MFE.
• Prestasi: Ujian penyepaduan biasanya lebih perlahan berbanding ujian unit.

Kita akan meneroka strategi untuk mengatasi cabaran ini.

Apabila mereka bentuk ujian penyepaduan untuk frontend mikro, tumpukan pada prinsip berikut:

• Uji Kontrak: Sahkan bahawa antara muka yang didedahkan dan API yang digunakan (bentuk data serta tandatangan fungsi) serasi.
• Aliran Hujung ke Hujung: Uji perjalanan pengguna yang kritikal dan merentasi beberapa MFE.
• Penyebaran Data: Pastikan kemas kini data berlaku dengan betul merentas keadaan dikongsi atau saluran komunikasi.
• Gubahan UI: Semak bahawa UI MFE yang berbeza dipaparkan dan berinteraksi seperti yang dijangka apabila digabungkan.

Elakkan menguji semula logik dalaman yang telah diliputi oleh ujian unit.

Pelbagai alat boleh membantu pengujian penyepaduan MFE:

• Jest / React Testing Library: Sangat sesuai untuk penyepaduan pada peringkat komponen, iaitu menguji cara hos menggunakan komponen jauh secara terasing.
• Cypress / Playwright: Sangat baik untuk pengujian hujung ke hujung (E2E), dengan mensimulasikan interaksi pengguna sebenar merentas beberapa MFE yang digunakan dalam pelayar.
• Mock Service Worker (MSW): Untuk mensimulasikan panggilan API dan permintaan rangkaian, berguna apabila menguji MFE yang bergantung pada perkhidmatan bahagian belakang.

Pilihan bergantung pada skop dan kedalaman ujian penyepaduan anda.

Titik penyepaduan MFE yang biasa ialah aplikasi hos menggunakan komponen atau utiliti yang didedahkan oleh aplikasi jauh melalui Module Federation.

Kita perlu mengesahkan bahawa hos menerima dan menggunakan perkara yang disediakan oleh aplikasi jauh dengan betul. Berikut ialah contoh JavaScript ringkas untuk menerangkan konsep utiliti dikongsi yang digunakan:

Banyak frontend mikro berkomunikasi menggunakan bas peristiwa atau peristiwa tersuai. Ujian penyepaduan hendaklah memastikan peristiwa dihantar dan dikendalikan dengan betul merentas sempadan MFE.

Anda boleh mensimulasikan peristiwa ini dalam ujian dan menegaskan bahawa MFE penerima bertindak balas seperti yang dijangka. Berikut ialah petikan ujian konseptual:

// In a test file (e.g., using Jest)

describe('MFE A dispatches, MFE B reacts', () => {
  test('MFE B updates state after MFE A event', () => {
    // 1. Render MFE B (the listener)
    const { getByText } = render(<MFEBComponent />);

    // 2. Simulate MFE A dispatching an event
    //    (e.g., via a global event bus or DOM event)
    window.dispatchEvent(new CustomEvent('userLoggedIn', {
      detail: { username: 'testuser' }
    }));

    // 3. Assert MFE B's UI or state updated
    expect(getByText('Welcome, testuser!')).toBeInTheDocument();
  });
});

Hal ini menyemak kontrak komunikasi.

Jika MFE anda berkongsi stor keadaan global (contohnya, Redux atau Zustand), ujian penyepaduan mesti mengesahkan bahawa perubahan dalam satu MFE mengemas kini keadaan dikongsi dengan betul dan MFE lain yang menggunakan keadaan tersebut bertindak balas sewajarnya.

Hal ini selalunya melibatkan pemaparan beberapa MFE dalam persekitaran ujian dan simulasi interaksi pengguna:

// Conceptual test for shared state

describe('Shared user profile state', () => {
  test('MFE A update reflects in MFE B', async () => {
    // 1. Render Host app with MFE A and MFE B
    const { getByLabelText, getByText } = render(<HostApp />);

    // 2. Simulate user action in MFE A (e.g., update profile name)
    fireEvent.change(getByLabelText('Name Input'), { target: { value: 'Jane Doe' } });
    fireEvent.click(getByText('Save Profile'));

    // 3. Assert MFE B (which displays profile) shows the new name
    await waitFor(() => {
      expect(getByText('Profile Name: Jane Doe')).toBeInTheDocument();
    });
  });
});

Hal ini memastikan konsistensi keadaan merentas aplikasi bersekutu anda.

Kadang-kadang, anda tidak perlu memuatkan semua MFE jauh untuk setiap ujian integrasi. Anda mungkin mahu mensimulasikan modul jauh tertentu atau kebergantungannya.

• Mengapa membuat simulasi? Ujian yang lebih pantas, pengasingan kegagalan dan pengujian senario tertentu (contohnya, kegagalan MFE jauh).
• Cara membuat simulasi: Gunakan keupayaan simulasi rangka kerja pengujian anda (contohnya, jest.mock() Jest) untuk menggantikan komponen atau fungsi jauh dengan pengganti ujian yang terkawal.

// Example of mocking a remote component

jest.mock('remoteApp/Button', () => ({ 
  __esModule: true, 
  default: ({ onClick, children }) => (
    <button onClick={onClick} data-testid="mock-button">
      {children} (Mocked)
    </button>
  ),
}));

Ini membolehkan anda menguji logik hos tanpa memerlukan komponen jauh yang sebenar.

Syabas! Anda telah mempelajari strategi penting untuk pengujian integrasi dalam Micro Frontend:

• Ujian integrasi mengesahkan interaksi antara MFE dan modul yang dikongsi.
• Ujian ini menangani cabaran khusus seperti persediaan persekitaran dan pengasingan ujian.
• Berikan tumpuan kepada kontrak, aliran data dan komunikasi merentas MFE.
• Alat seperti Jest, React Testing Library, Cypress dan Playwright adalah penting.
• Teknik yang digunakan termasuk menguji penggunaan komponen, pengendalian peristiwa, keadaan yang dikongsi dan simulasi strategik.

Dengan menerapkan strategi ini, anda boleh membina aplikasi bersekutu yang lebih kukuh dan boleh dipercayai. Teruskan berlatih!