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

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

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

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

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

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

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

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

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

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

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

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

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

要跟隨，您需要：

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

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

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

假設(shè)我們想要建立一個(gè)搜尋元件，根據(jù)使用者輸入過(guò)濾項(xiàng)目清單。我們將首先編寫(xiě)一個(gè)測(cè)試來(lái)檢查元件是否正確過(guò)濾項(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”。
斷言?xún)H顯示過(guò)濾後的項(xiàng)目。

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

第 3 步：綠色階段 – 編寫(xiě)最少程式碼以通過(guò)測(cè)試

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

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

在此程式碼中：

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

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

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

測(cè)試通過(guò)後，我們就可以專(zhuān)注於提高程式碼品質(zhì)了。一個(gè)小的重構(gòu)可能涉及將過(guò)濾邏輯提取到一個(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();
});

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

用於處理邊緣情況的 TDD

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

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

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

非同步前端程式碼中的 TDD

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

假設(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;

在測(cè)試中，我們可以使用 jest.fn() 來(lái)模擬 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ù)

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

結(jié)論

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

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