使用 Cypress 測試 React 應用程式：綜合指南

介紹

測試是開發過程的關鍵部分，可確保您的應用程式按預期運行並隨著時間的推移保持穩健。 Cypress 是一個強大的端到端測試框架，可提供出色的開發人員體驗，並與 React 等現代 JavaScript 框架無縫整合。在這篇文章中，我們將探討如何使用 Cypress 設定和測試 React 應用程序，重點關注實際範例和最佳實踐。

為什麼要使用 Cypress 進行 React 測試？

1. 開發者體驗：Cypress 提供直覺的 API、即時重載和互動式除錯，讓編寫和維護測試變得容易。
2. 快速可靠：Cypress 直接在瀏覽器中運行，提供快速可靠的測試和一致的結果。
3. 強大的功能：Cypress 包含時間旅行、自動等待和詳細錯誤訊息等內建功能，提高了測試品質和生產力。
4. 無縫整合：Cypress 與 React 應用程式無縫集成，讓您可以有效地測試組件、互動和使用者流程。

為 React 設定 Cypress

要在 React 應用程式中開始使用 Cypress，請按照以下步驟操作：

第 1 步：安裝 Cypress
首先，在 React 專案中安裝 Cypress 作為開發相依性：

npm install cypress --save-dev

第 2 步：設定 Cypress
透過執行以下命令開啟 Cypress Test Runner：

npx cypress open

這將在您的專案中建立一個帶有預設配置和範例測試的 cypress 資料夾。如果需要，您可以在 cypress.json 檔案中自訂配置。
第 3 步：建立測試檔案
在 cypress/e2e 目錄中，建立一個新的測試文件，例如react-app.spec.js。該文件將包含您的 React 應用程式的 Cypress 測試。

為 React 寫 Cypress 測驗
讓我們為 React 應用程式編寫一些基本測試。我們將介紹元件渲染、互動和斷言。

範例：測試 React 元件
假設我們有一個簡單的 React 元件，名稱為 Counter:

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
};

export default Counter;

我們可以寫 Cypress 檢定來驗證元件的行為：

describe('Counter Component', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should render the counter with initial value', () => {
        cy.get('h1').contains('Counter: 0');
    });

    it('should increment the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('h1').contains('Counter: 1');
    });

    it('should decrement the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('button').contains('Decrement').click();
        cy.get('h1').contains('Counter: 0');
    });
});

在這些測試中：

• 我們使用 cy.visit('/') 導航到應用程式的根 URL。
• 我們使用 cy.get() 透過文字內容或 CSS 選擇器來選擇元素。
• 我們使用 cy.contains() 來驗證所選元素是否包含特定文字。
• 我們使用 cy.click() 來模擬按鈕點擊並觸發互動。

進階測試場景

測試表單輸入
假設我們有一個包含使用者名稱和密碼輸入的登入表單。以下是我們測試它的方法：

describe('Login Form', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should allow a user to type in the username and password', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
    });

    it('should show an error message for invalid credentials', () => {
        cy.get('input[name="username"]').type('invaliduser');
        cy.get('input[name="password"]').type('wrongpassword');
        cy.get('button[type="submit"]').click();
        cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
    });

    it('should redirect to dashboard on successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
    });
});

模擬 API 請求
您可以使用 Cypress 攔截和模擬 API 請求來測試不同的場景，而無需依賴後端：

describe('API Mocking', () => {
    beforeEach(() => {
        cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fakeToken' } }).as('loginRequest');
        cy.visit('/login');
    });

    it('should mock a successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);
        cy.url().should('include', '/dashboard');
    });
});

使用 Cypress 測試 React 應用程式的最佳實踐

1. 隔離測試：保持測試獨立以避免副作用並確保可靠性。
2. 使用夾具：將測試資料儲存在夾具中，以保持測試乾淨且可維護。
3. 利用自訂指令： 建立自訂 Cypress 指令來封裝可重複使用的測試邏輯。
4. 在 CI/CD 中執行測試：將 Cypress 測試整合到 CI/CD 管道中以儘早發現問題。
5. 測試可訪問性：使用 cypress-axe 等工具進行可訪問性測試，以確保您的應用程式可存取。

結論

Cypress 提供了一種強大且對開發人員友好的方法來測試 React 應用程式。透過遵循本指南中概述的步驟和範例，您可以在 React 專案中設定 Cypress 並編寫有效的端對端測試。利用 Cypress 的強大功能和最佳實踐將幫助您創建可靠、可維護和高品質的測試，確保您的 React 應用程式能如預期運作。

測試愉快！

以上是使用 Cypress 測試 React 應用程式：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！