Heim > Artikel > Web-Frontend > React Basics ~ Unit-Test/benutzerdefinierter Hook
・src/App.tsx
import "./App.css"; import Counter from "./component/counter/Counter"; function App() { return ( <div className="App"> <Counter /> </div> ); } export default App;
・src/component/counter/Counter.tsx
import React, { useState } from "react"; import { useCounter } from "../../hooks/useCounter"; const Counter = () => { const { count, increment } = useCounter({ initialCount: 10 }); return ( <div> <h1>{count}</h1> <button onClick={() => increment()}>Increment</button> </div> ); }; export default Counter;
・src/hooks/useCounter.tsx
import React, { useState } from "react"; import { UseCounterProps } from "./useCounter.type"; type UseCounterProps = { initialCount?: number; }; export const useCounter = ({ initialCount = 0 }: UseCounterProps = {}) => { const [count, setCount] = useState(initialCount); const increment = () => setCount((prev) => prev + 1); return { count, increment }; };
・src/hooks/useCounter.test.tsx
import { renderHook } from "@testing-library/react"; import { useCounter } from "./useCounter"; import { act } from "react-dom/test-utils"; describe("useCounter", () => { test("Should render the initial count", () => { const { result } = renderHook(useCounter, { initialProps: { initialCount: 10 }, }); expect(result.current.count).toBe(10); }); test("Increment the count", () => { const { result } = renderHook(useCounter); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); }); });
Wenn ich Requisiten übergebe, in diesem Fall initialCount(=10), füge ich eine Eigenschaft hinzu, die initialProps: { initialCount: 10 } ist.
Wenn ich eine Funktion des benutzerdefinierten Hooks teste, in diesem Fall das inkrement(), verwende ich den Akt und rufe das inkrement() innerhalb des Rückrufs auf.
・Erfolg
・Fehler
・die Anzeigeaktion
Das obige ist der detaillierte Inhalt vonReact Basics ~ Unit-Test/benutzerdefinierter Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!