Heim  >  Artikel  >  Web-Frontend  >  React Basics ~ Unit-Test/benutzerdefinierter Hook

React Basics ~ Unit-Test/benutzerdefinierter Hook

Linda Hamilton
Linda HamiltonOriginal
2024-11-01 11:06:02844Durchsuche
  • 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
React Basics~unit test/custom hook

・Fehler
React Basics~unit test/custom hook

・die Anzeigeaktion
React Basics~unit test/custom hook

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn