اختبار التفاعلات وإتاحتها

import { useState } from "react";
export default function App() { const [count, setCount] = useState(0); return <main><h1>Test target</h1><button type="button" onClick={() => setCount(c => c + 1)}>Add one</button><output aria-label="Count">{count}</output></main>; }

Initial Count: 0. After Add one: 1.

يجد الاختبار الزر باسمه ويؤكد مخرج Count بعد الالتزام.

import { act, useState } from "react";
import { createRoot } from "react-dom/client";
function Counter() { const [n, setN] = useState(0); return <><button type="button" onClick={() => setN(x => x + 1)}>Add</button><output>{n}</output></>; }
export async function verify(container) { const root = createRoot(container); try { await act(async () => root.render(<Counter />)); await act(async () => container.querySelector("button").click()); const result = container.querySelector("output").textContent; if (result !== "1") throw new Error("Expected one"); return result; } finally { await act(async () => root.unmount()); } }
export default function App() { return <main><h1>Coordinated test target</h1><Counter /></main>; }

Calling verify with an isolated empty test container returns "1".

تحتاج الدالة حاوية اختبار منفصلة وبيئة act وتعيد واحدا بعد التأكيد وتحرر الجذر.