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

為什麼在前端開發(fā)中使用 TDD？

前端開發(fā)面臨獨(dú)特的挑戰(zhàn)，包括使用者互動(dòng)、渲染元件和管理非同步資料流。 TDD 使開發(fā)人員能夠在每個(gè)階段驗(yàn)證其邏輯、元件和 UI 狀態(tài)，從而提供協(xié)助。 TDD 在前端的好處包括：

更高的程式碼品質(zhì)：首先編寫測試可以透過強(qiáng)制模組化來鼓勵(lì)乾淨(jìng)、可維護(hù)的程式碼。

提高開發(fā)人員信心：測試在程式碼投入生產(chǎn)之前捕獲錯(cuò)誤，減少回歸錯(cuò)誤。

更好的使用者體驗(yàn)：TDD 確保元件和互動(dòng)能如預(yù)期運(yùn)作，從而實(shí)現(xiàn)更流暢的使用者體驗(yàn)。

重構(gòu)安全：測試提供了一個(gè)安全網(wǎng)，讓開發(fā)人員進(jìn)行重構(gòu)而不必?fù)?dān)心破壞功能。

TDD 在前端如何運(yùn)作：紅-綠-重建循環(huán)

TDD 流程遵循一個(gè)簡單的三步驟循環(huán)：紅色、綠色、重構(gòu)。

紅色 - 為新特性或功能編寫測試。由於尚未實(shí)現(xiàn)任何程式碼，因此該測試最初應(yīng)該會(huì)失敗。

綠色 - 寫出通過測試所需的最少程式碼。
重構(gòu) - 清理和優(yōu)化程式碼而不改變其行為，確保測試?yán)^續(xù)通過。

讓我們透過在 React 中建立簡單搜尋元件的範(fàn)例來應(yīng)用 TDD。

範(fàn)例：在 React 中為搜尋元件實(shí)作 TDD
第 1 步：設(shè)定測試環(huán)境

要跟隨，您需要：

React 用於建立 UI 元件。
用於編寫和運(yùn)行測試的 Jest 和 React 測試庫。

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

第 2 步：紅色階段 – 寫出失敗的測驗(yàn)

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

// 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} />);

  // 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();
});

這就是我們正在做的：

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

現(xiàn)在執(zhí)行測試將會(huì)失敗，因?yàn)槲覀冞€沒有實(shí)作搜尋元件。這是“紅色”階段。

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

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

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

在此程式碼中：

我們使用 useState 來儲(chǔ)存搜尋查詢。
我們根據(jù)查詢過濾項(xiàng)目數(shù)組。
我們僅渲染與查詢相符的項(xiàng)目。

現(xiàn)在，執(zhí)行測試應(yīng)該會(huì)導(dǎo)致測試通過的「綠色」階段。

第四步：重構(gòu)－提高程式碼結(jié)構(gòu)與可讀性

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

// 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} />);

  // 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();
});

透過重構(gòu)，程式碼更加清晰，過濾邏輯更加可重複使用。執(zhí)行測試可確保組件仍如預(yù)期運(yùn)作。

用於處理邊緣情況的 TDD

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

// 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;

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

非同步前端程式碼中的 TDD

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

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

// 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 回應(yīng)。

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

  // 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={[]} />);

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

前端 TDD 最佳實(shí)務(wù)

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

結(jié)論

測試驅(qū)動(dòng)開發(fā)為前端開發(fā)帶來了眾多優(yōu)勢，包括更高的程式碼品質(zhì)、減少錯(cuò)誤和提高信心。雖然 TDD 需要思維方式和紀(jì)律的轉(zhuǎn)變，但它成為一項(xiàng)寶貴的技能，尤其是在處理複雜的使用者互動(dòng)和非同步資料流時(shí)。遵循 TDD 流程（紅色、綠色、重構(gòu)）並逐漸將其整合到您的工作流程中將幫助您創(chuàng)建更可靠、可維護(hù)且用戶友好的前端應(yīng)用程式。

以上是前端測試驅(qū)動(dòng)開發(fā) (TDD)。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！