前端測試驅動開發 (TDD)。

測試驅動開發 (TDD) 被廣泛認為可以提高程式碼品質並減少軟體開發中的錯誤。雖然 TDD 在後端和 API 開發中很常見，但它在前端開發中同樣強大。透過在實現功能之前編寫測試，前端開發人員可以儘早發現問題，確保一致的使用者體驗並自信地進行重構。在本文中，我們將在前端開發的背景下探索 TDD，討論它的好處，並演練使用 React 和 JavaScript 的範例。

為什麼在前端開發中使用 TDD？

前端開發面臨獨特的挑戰，包括使用者互動、渲染元件和管理非同步資料流。 TDD 使開發人員能夠在每個階段驗證其邏輯、元件和 UI 狀態，從而提供協助。 TDD 在前端的好處包括：

更高的程式碼品質：首先編寫測試可以透過強制模組化來鼓勵乾淨、可維護的程式碼。

提高開發人員信心：測試在程式碼投入生產之前捕獲錯誤，減少回歸錯誤。

更好的使用者體驗：TDD 確保元件和互動能如預期運作，從而實現更流暢的使用者體驗。

重構安全：測試提供了一個安全網，讓開發人員進行重構而不必擔心破壞功能。

TDD 在前端如何運作：紅-綠-重建循環

TDD 流程遵循一個簡單的三步驟循環：紅色、綠色、重構。

紅色 - 為新特性或功能編寫測試。由於尚未實現任何程式碼，因此該測試最初應該會失敗。

綠色 - 寫出通過測試所需的最少程式碼。
重構 - 清理和優化程式碼而不改變其行為，確保測試繼續通過。

讓我們透過在 React 中建立簡單搜尋元件的範例來應用 TDD。

範例：在 React 中為搜尋元件實作 TDD
第 1 步：設定測試環境

要跟隨，您需要：

React 用於建立 UI 元件。
用於編寫和運行測試的 Jest 和 React 測試庫。

# Install dependencies
npx create-react-app tdd-search-component
cd tdd-search-component
npm install @testing-library/react

第 2 步：紅色階段 – 寫出失敗的測驗

假設我們想要建立一個搜尋元件，根據使用者輸入過濾項目清單。我們將首先編寫一個測試來檢查元件是否正確過濾項目。

// Search.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Search from "./Search";

test("filters items based on the search query", () => {
  const items = ["apple", "banana", "cherry"];
  render(<search items="{items}"></search>);

  // Ensure all items are rendered initially
  items.forEach(item => {
    expect(screen.getByText(item)).toBeInTheDocument();
  });

  // Type in the search box
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Check that only items containing "a" are displayed
  expect(screen.getByText("apple")).toBeInTheDocument();
  expect(screen.getByText("banana")).toBeInTheDocument();
  expect(screen.queryByText("cherry")).not.toBeInTheDocument();
});

這就是我們正在做的：

使用項目數組渲染搜尋元件。
模擬在搜尋框中輸入“a”。
斷言僅顯示過濾後的項目。

現在執行測試將會失敗，因為我們還沒有實作搜尋元件。這是“紅色”階段。

第 3 步：綠色階段 – 編寫最少程式碼以通過測試

現在，讓我們建立搜尋元件並編寫測試通過所需的最少程式碼。

# Install dependencies
npx create-react-app tdd-search-component
cd tdd-search-component
npm install @testing-library/react

在此程式碼中：

我們使用 useState 來儲存搜尋查詢。
我們根據查詢過濾項目數組。
我們僅渲染與查詢相符的項目。

現在，執行測試應該會導致測試通過的「綠色」階段。

第四步：重構－提高程式碼結構與可讀性

測試通過後，我們就可以專注於提高程式碼品質了。一個小的重構可能涉及將過濾邏輯提取到一個單獨的函數中，以使組件更加模組化。

// Search.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Search from "./Search";

test("filters items based on the search query", () => {
  const items = ["apple", "banana", "cherry"];
  render(<search items="{items}"></search>);

  // Ensure all items are rendered initially
  items.forEach(item => {
    expect(screen.getByText(item)).toBeInTheDocument();
  });

  // Type in the search box
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Check that only items containing "a" are displayed
  expect(screen.getByText("apple")).toBeInTheDocument();
  expect(screen.getByText("banana")).toBeInTheDocument();
  expect(screen.queryByText("cherry")).not.toBeInTheDocument();
});

透過重構，程式碼更加清晰，過濾邏輯更加可重複使用。執行測試可確保組件仍如預期運作。

用於處理邊緣情況的 TDD

在 TDD 中，考慮邊緣情況至關重要。在這裡，我們可以添加測試來處理諸如空項目數組或與任何項目都不匹配的搜尋詞之類的情況。
例：測試邊緣情況

// Search.js
import React, { useState } from "react";

function Search({ items }) {
  const [query, setQuery] = useState("");

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input type="text" placeholder="Search..." value="{query}" onchange="{(e)"> setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key="{item}">{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

這些測試進一步確保我們的元件能夠處理異常情況而不會中斷。

非同步前端程式碼中的 TDD

前端應用程式通常依賴非同步操作，例如從 API 取得資料。 TDD 也可以應用在這裡，儘管它需要在測試中處理異步行為。
範例：測試非同步搜尋組件

假設我們的搜尋元件從 API 取得數據，而不是作為 prop 接收數據。

// Refactored Search.js
import React, { useState } from "react";

function filterItems(items, query) {
  return items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
}

function Search({ items }) {
  const [query, setQuery] = useState("");
  const filteredItems = filterItems(items, query);

  return (
    <div>
      <input type="text" placeholder="Search..." value="{query}" onchange="{(e)"> setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key="{item}">{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

在測試中，我們可以使用 jest.fn() 來模擬 API 回應。

test("displays no items if the search query doesn't match any items", () => {
  const items = ["apple", "banana", "cherry"];
  render(<search items="{items}"></search>);

  // Type a query that doesn't match any items
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "z" } });

  // Verify no items are displayed
  items.forEach(item => {
    expect(screen.queryByText(item)).not.toBeInTheDocument();
  });
});

test("renders correctly with an empty items array", () => {
  render(<search items="{[]}"></search>);

  // Expect no list items to be displayed
  expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
});

前端 TDD 最佳實務

從小處開始：專注於一小部分功能並逐漸增加複雜性。
編寫清晰的測試：測試應該易於理解並且與功能直接相關。
測試使用者互動：驗證使用者輸入、點擊和其他互動。
覆蓋邊緣情況：確保應用程式優雅地處理異常輸入或狀態。
用於非同步測試的模擬 API：模擬 API 呼叫以避免測試期間對外部服務的依賴。

結論

測試驅動開發為前端開發帶來了眾多優勢，包括更高的程式碼品質、減少錯誤和提高信心。雖然 TDD 需要思維方式和紀律的轉變，但它成為一項寶貴的技能，尤其是在處理複雜的使用者互動和非同步資料流時。遵循 TDD 流程（紅色、綠色、重構）並逐漸將其整合到您的工作流程中將幫助您創建更可靠、可維護且用戶友好的前端應用程式。

以上是前端測試驅動開發 (TDD)。的詳細內容。更多資訊請關注PHP中文網其他相關文章！