ReactJS 測試：初學者指南

您好，未來的 React 開發者們！我很興奮能成為您探索 React 測試世界的引路人。作為一個教了多年計算機科學的人，我親眼見證了測試如何將一名好的開發者蛻變為一名出色的開發者。所以，讓我們一起潛入水中，共同揭開 React 測試的神秘面紗！

ReactJS - Testing

測試的重要性

在我們開始編程之前，讓我分享一個快速的故事。我曾經有一個學生，他建立了一個非常漂亮的 React 應用程序。看起來完美無缺...直到在演示時崩潰。這時他痛苦地學到了一個道理：外表可能會騙人，但測試不會。測試不僅僅是關於捕獲錯誤；它是關於信心。當你的測試通過時，你可以安心地睡覺，知道你的代碼按預期工作。

Create React App：你的測試遊樂場

設置開發環境

讓我們從使用 Create React App 創建一個新的 React 應用程序開始。這個工具為你設定了一個準備好使用的 React 專案，並且已經配置好了測試。打開你的終端並輸入以下命令：

npx create-react-app my-react-testing-app
cd my-react-testing-app

恭喜你！你剛剛創建了你第一個帶有內置測試功能的 React 應用程序。就像獲得了一個帶有電池的新玩具！

你的第一個測試

Create React App 伴隨著一個示例測試文件。讓我們來看看它。打開 src/App.test.js：

import { render, screen } from '@testing-library/react';
import App from './App';

test('渲染 learn react 链接', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

讓我們來分解這段代碼：

我們導入了必要的測試工具和我們的 App 组件。
我們使用 test 函数定義了一個測試。
我們渲染了我們的 App 组件。
我們尋找包含文字 "learn react" 的元素。
我們期望這個元素在文檔中。

要運行這個測試，使用以下命令：

npm test

如果一切設定正確，你应该會看到一個通過的測試。恭喜你完成第一個 React 測試！

在自定義應用程序中進行測試

現在我們已經看到了一個基本的測試，讓我們創建我們自己的组件並測試它。

創建一個簡單的组件

讓我們創建一個簡單的計數器组件。創建一個新文件 src/Counter.js：

import React, { useState } from 'react';

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

return (
<div>
<p>計數：{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}

export default Counter;

這個组件顯示一個計數和一個按鈕來增加它。

為我們的計數器编写測試

現在，讓我們為我們的 Counter 组件進行測試。創建一個新文件 src/Counter.test.js：

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('渲染初始計數為 0', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});

test('點擊按鈕時增加計數', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});

讓我們來分解這些測試：

第一個測試檢查初始計數是否為 0。
第二個測試模擬按鈕點擊並檢查計數是否增加到 1。

再次運行 npm test，你应该會看到這些新的測試通過！

高級測試概念

當你對基本測試感到越來越熟悉時，你會想要探索更先進的概念。以下是一些你常會在 React 測試中使用的方法：

方法	描述	示例
render	為測試渲染一個 React 组件	`render(<MyComponent />)`
screen.getByText	根據文本內容查找元素	`screen.getByText(/hello world/i)`
screen.getByRole	根據 ARIA 角色查找元素	`screen.getByRole('button')`
fireEvent	模擬 DOM 事件	`fireEvent.click(button)`
waitFor	等待期望條件成立	`await waitFor(() => expect(element).toBeVisible())`
act	繞過代碼以引起 React 狀態更新	`act(() => { /* 運行動作 */ })`

測試異步行為

React 應用程序通常會涉及異步操作。讓我們創建一個從遠程數據源獲取數據的组件，並進行測試：

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>加載中...</div>;

return <div>用戶名：{userData.name}</div>;
}

export default UserData;

現在，讓我們來測試這個组件：

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('加載並顯示用戶數據', async () => {
render(<UserData />);

expect(screen.getByText(/loading/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});

這個測試檢查加載狀態，然後等待用戶數據被顯示。

結論

在 React 中進行測試可能一開始看起來令人生畏，但它是一項非常有價值的技能，會讓你成為一名更好的開發者。記住，你寫的每一個測試都是為你的代碼設置的一個安全網。它會在你跌倒時撐住你，並給你信心去爬得更高。

在你繼續你的 React 之旅時，請繼續探索不同的測試技巧。模擬 API 调用，測試錯誤狀態，並挑戰自己在編寫组件之前先寫測試（測試驅動開發）。你越多練習，它就越會變得自然。

祝你好運，願你的控制台總是因為通過的測試而變得綠油油！

Credits: Image by storyset