[2

有效的反應組件測試至關重要。 React測試庫（RTL）簡化了此過程，強調用戶交互測試。 本文介紹了五種高級RTL技術，用於編寫更有效和可維護的單元測試。

1。 優先級

screen

---

避免直接從

破壞查詢。使用屏幕對象始終提高可讀性和清晰度。

好處：

增強測試可讀性。

明確顯示與渲染的屏幕元素的交互。

例子：

而不是：

const { getByText } = render(); 期待（getByText（/單擊me/i））。

使用：

使成為（）; 期待（screet.getByText（/單擊me/i））。

此方法在較大的測試套件上保持一致性。

const { getByText } = render();
expect(getByText(/click me/i)).toBeInTheDocument();

For components rendering elements asynchronously (e.g., after API calls), utilize

findBy

queries instead of

render();
expect(screen.getByText(/click me/i)).toBeInTheDocument();

好處：

---

由於定時問題消除了片狀測試。 為異步組件創建更強大的測試。

例子： // component asynchronally獲取並顯示一個用戶名 渲染（）; const用戶名=等待屏幕。 期待（用戶名）.tobeinthedocument（）;

waitfor 可以實現相似的結果，但是的組合

render（）; 等待waitfor（（）=> { 期待（screet.getByText（/john doe/i））。 tobeinthedocument（）; }）;
3。

在

定位特定容器中的元素時，在實用程序中預防了模棱兩可的匹配。

// Component asynchronously fetches and displays a username
render();
const userName = await screen.findByText(/john doe/i);
expect(userName).toBeInTheDocument();

預防意外元素選擇。 改進測試精度。 例子：

render();
await waitFor(() => {
  expect(screen.getByText(/john doe/i)).toBeInTheDocument();
});

---

4。 userevent 用於現實的互動 while

fireevent

userevent 好處：

更準確的事件仿真。

處理文本輸入等複雜交互。
• 例子：

從'@testing-library/user-event'導入USEREVENT'; 渲染（）; const emailInput = screen.getByLabelText（/email/i）; const passwordInput = screen.getByLabelText（/password/i）; const submistButton = screen.getByrole（'button'，{name： /simp /i}）; 等待userevent.type（emailInput，'[email protected]'）; 等待userevent.type（passwordinput，'password123'）; 等待userevent.click（cumbsbutton）; 期待（screet.getByText（/welcome/i））。 此方法確保測試準確反映了現實世界的用戶行為。

render(
  

    
Personal Information
    Name
  
);

const nameLabel = within(screen.getByRole('group')).getByLabelText(/Name/i);
expect(nameLabel).toBeInTheDocument();

debug（）[2

好處：

---

快速識別缺失的元素或測試失敗。 簡化了調試。

例子：

render（）; screen.debug（）; //記錄DOM結構

[2
專注於用戶交互：
• 測試用戶看到和交互的，而不是內部組件狀態。

組合匹配器：

使用。 tohaveTextContent（）清理：

當RTL處理清理時，在

import userEvent from '@testing-library/user-event';

render();
const emailInput = screen.getByLabelText(/email/i);
const passwordInput = screen.getByLabelText(/password/i);
const submitButton = screen.getByRole('button', { name: /submit/i });

await userEvent.type(emailInput, '[email protected]');
await userEvent.type(passwordInput, 'password123');
await userEvent.click(submitButton);

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

結論：

---

[&& && rtl優先考慮以用戶為中心的測試。 通過應用這些技術，您將創建更清潔，更可靠和可維護的測試，從而改善整體開發工作流程。 擁抱這些策略以增強您的反應測試實踐。