摘要

• 這篇文章的目的是 ?
• React「Testing」分享
• 連結

這篇文章的目的是 ?

軟體測試在現代軟體開發中扮演著極其重要的角色。它確保我們所建立的程式碼在各種情境下都能正確運作，提高了程式碼的品質，降低了錯誤的風險。本章的目的是分享有關測試的重要性以及如何在React應用程式中進行測試的知識。

React「Testing」分享

Playwright 與 Cypress：

在React應用程式測試中，有兩個主要的方向可以選擇：Playwright和Cypress。這兩個工具都具有獨特的優勢和用途。

• Playwright：是一個跨瀏覽器測試工具，支援多種主流瀏覽器，可確保您的應用程式在不同環境中運行正確。以下是Playwright的程式碼範例：（示範瀏覽器自動化）

  const { chromium } = require('playwright');
  
  (async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });
    await browser.close();
  })();
  

• Cypress**：**則專注於端對端測試，模擬用戶在應用程式中的交互行為。以下是Cypress的程式碼範例：（示範用戶行為測試）

  describe('My First Test', () => {
    it('Visits the homepage', () => {
      cy.visit('https://example.com');
      cy.contains('Welcome to Example').should('be.visible');
    });
  });
  

Unit testing 單元測試與 End-to-end testing 端對端測試的不同：

單元測試和端對端測試是兩種不同的測試類型，其焦點和範圍不同。

• 單元測試 (Unit Testing)：針對應用程式中的個別部分（通常是函數、組件或模組）進行測試，目的是驗證這些部分的獨立運作是否正確。通常不考慮整個應用程式的運行。使用模擬或虛擬的依賴項來隔離測試對象，並且重點在於快速運行和提供快速反饋。
• 端對端測試 (End-to-End Testing)：關注整個應用程式的測試，包括前端和後端，以確保應用程式在實際使用情境下的正確運行。模擬真實用戶的行為，驗證應用程式的功能是否正確。通常比單元測試複雜且耗時，但提供更全面的保證。

總結來說，單元測試驗證個別部分的正確性，而端對端測試則確保整個應用程式的正確運行。在React應用程式開發中，通常結合使用這兩種測試，以確保程式碼的品質和可靠性。

連結

• Playwright：https://playwright.dev/
• Cypress：https://www.cypress.io/