React Basics ~ Unit-Test/benutzerdefinierter Hook

• Wenn ich eine benutzerdefinierte Hook-Komponente teste, verwende ich einen aus „@testing-library/react“ importierten renderHook und einen aus „react-dom/test-utils“ importierten Act.

・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!