Maison > interface Web > js tutoriel > React Basics ~ test unitaire/hook personnalisé

React Basics ~ test unitaire/hook personnalisé

Linda Hamilton
Libérer: 2024-11-01 11:06:02
original
930 Les gens l'ont consulté
  • Lorsque je teste un composant hook personnalisé, j'utilise un renderHook importé de @testing-library/react' et un acte importé de react-dom/test-utils'.

・src/App.tsx

import "./App.css";
import Counter from "./component/counter/Counter";

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

Copier après la connexion

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

Copier après la connexion

・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 };
};

Copier après la connexion

・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);
  });
});

Copier après la connexion
  • Quand je passe un accessoire, dans ce cas c'est initialCount(=10), j'ajoute une propriété qui est initialProps : { initialCount: 10 }.

  • Lorsque je teste une fonction du hook personnalisé, dans ce cas l'incrément(), j'utilise l'acte et j'appelle l'incrément() à l'intérieur du rappel.

・Succès
React Basics~unit test/custom hook

・Échec
React Basics~unit test/custom hook

・l'action d'affichage
React Basics~unit test/custom hook

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal